如何仅使用CSS Flex在一行中居中并右对齐 [英] How to Center and Right-align on a row with CSS Flex only

问题描述

尝试了许多这样的变化，但无法让它起作用。这是最后一次尝试：

  .parent {
 display：flex; 
 // justify-content：center; 
 width：600px; 
 background-color：yellow 
} 
 .c {
 // flex：1 1 0; 
 // text-align：end; 
 margin-left：auto; 
 margin-right：auto; 
 background-color：cyan; 
} 
 .e {
 // flex：1 1 0; 
 // text-align：end; 
 background-color：gray; 
} 
 .bs {
 background-color：green; 
颜色：白色; 
 width：70px; 
 
 $ / code> 

with html：

 < div class =parent> 
< div class =c> 
< button class =bs>确定< /按钮> 
< button class =bs>取消< /按钮> 
< / div> 
< div class =e> 
< button class =bs>帮助< / button> 
< / div> 
< / div> 
  

我知道如何通过在左侧放置'visibility：hidden'按钮来解决这个问题并在空间之间使用justify-content，但我想学习/知道如何使用CSS来完成。

感谢您的建议。

解决方案

有很多方法可以做到这一点。

（没有额外的标记/隐藏元素），并使它和每个按钮包装器占总宽度的1/3，给出它们 flex-basis：100％ ，然后默认 flex-shrink：1 会将它们缩小。

  .parent {display：flex;宽度：600px; background-color：yellow} .parent :: before，.c，.e {content：''; flex-basis：100％;}。c {background-color：cyan; text-align：center;} .e {background-color：gray; text-align：right;} .bs {background-color：green;白颜色; width：70px;}  

< div class =parent > < div class =c> < button class =bs>确定< / button> < button class =bs>取消< /按钮> < / DIV> < div class =e> < button class =bs>帮助< / button> < / div>< / div>

$ b

---

以上解决方案基于我在这里给出的答案：

• 如何将单行上的按钮组与单独的Flex对齐？
  

这里有3种方法，第一个样本也可以解决这个问题，不需要额外的标记绝对定位

• 居中并右对齐flexbox元素

Tried many variations like this, but could not get it to work. Here is the last attempt:

.parent {
  display: flex;
  //justify-content: center;
  width: 600px;
  background-color: yellow
}
.c {
  //flex: 1 1 0;
  //text-align: end;
  margin-left: auto;
  margin-right: auto;
  background-color: cyan;
}  
.e {
  //flex: 1 1 0;
  // text-align: end;
  background-color: grey;
}  
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

with html:

<div class="parent">
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

I know how to solve this by placing a 'visibility: hidden' button on the left-hand side and use justify-content with space-between, but I want to learn/know how to do it using CSS only.

Would be grateful for advice.

解决方案

There is more than one way to do that.

Here with CSS only (no extra markup/hidden element) using a pseudo and make it and each button wrapper take 1/3 each of the total width, by giving them flex-basis: 100% and then the default flex-shrink: 1 will shrink them equally.

.parent {
  display: flex;
  width: 600px;
  background-color: yellow
}
.parent::before, .c, .e {
  content: '';
  flex-basis: 100%;
}
.c {
  background-color: cyan;
  text-align: center;
}  
.e {
  background-color: grey;
  text-align: right;
}  
.bs {
  background-color: green;
  color: white;
  width: 70px;
}

<div class="parent">
  <div class="c">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </div>
  <div class="e">
    <button class="bs">Help</button>
  </div>
</div>

---

The above solution is based on the answer I gave here:

• How to align groups of buttons on single row with Flex only?

And here is 3 more ways, where the first sample also solve this without any extra markup using absolute positioning

• Center and right align flexbox elements

这篇关于如何仅使用CSS Flex在一行中居中并右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！