如何仅使用 CSS Flex 在一行上居中和右对齐

Question

尝试了许多类似的变体，但无法使其正常工作。这是最后一次尝试：

.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;
}

带有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>

我知道如何通过在左侧放置一个“可见性：隐藏”按钮并使用 justify-content 和空格来解决这个问题，但我想学习/知道如何仅使用 CSS 来做到这一点。

不胜感激。

Answer 1

有不止一种方法可以做到这一点。

这里仅使用 CSS（没有额外的标记/隐藏元素）使用伪并使其和每个 按钮包装器占据总宽度的 1/3，给它们flex-basis: 100% 然后默认的flex-shrink: 1 会同样缩小它们。

.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>

---

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

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

这里还有另外 3 种方法，第一个示例也解决了这个问题，而无需使用绝对定位进行任何额外标记

• Center and right align flexbox elements

Answer 2

如果您希望它完全对齐，您可以添加一个空子 div 并将三个子 divs 分成三份。

这将起作用：CodePen Demo

.parent {
  display: flex;
  background-color: yellow;
}

.parent div {
  display: flex;
  flex-basis: calc(100% / 3);
}

.c {
  justify-content: center;
  background-color: cyan;
}

.e {
  justify-content: flex-end;
  background-color: grey;
}

.bs {
  background-color: green;
  color: white;
}

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

注意：如果您希望按钮大小相同，可以在上面的代码中将flex-basis: calc(100% / 3); 添加到您的.bs 类中。

您可能还想在中心按钮上添加水平边距。

---

你也可以创建一个空子div在父容器上调用justify-content: space-between，但是不会完美对齐：CodePen Demo，或者使用下面的sn-p .

---

.parent {
  display: flex;
  justify-content: space-between;
  background-color: yellow;
}

.bs {
  background-color: green;
  color: white;
}

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

Answer 3

.parent00_100perc, .parent01_100perc {
  display: flex;
  width: 480px;
  background-color: yellow;
}

.parent00_100perc::before {
  content: '';
  flex: 0 0 100%; 
}
.parent01_100perc::before {
  content: '';
  flex: 0 1 100%; 
}


.spanflex00 { flex: 0 0 100%;}
.spanflex01 { flex: 0 1 100%;}

.bs {
  background-color: green;
  color: white;
  width: 70px;
}
.itemcenter {
  background-color: cyan;
  text-align: center;
}
.itemright {
  background-color: grey;
  text-align: right;
}

<p>Solution is by LGSon. I have just added a bit to verify I understand it by showing the initialisation and shrinkage phases of the solution, i.e.</p>

<p>Phase 1. initialisation that produces three parts of equal size on a single line. From left to right an empty part, a mid part with centred OK and Cancel buttons and a last part with a right-aligned Help button. Size of line 3x480px and is shown.</p>

<p>Phase 2. init & shrinkage that removes equal amount of space on the left and between the mid and right buttons. This leaves the OK and Cancel buttons still centred and shows a 480px wide result>


<p>Phase 1: after initialsation 0 0 100%</p> 
<div class="parent00_100perc">
  <span class="spanflex00 itemcenter">
    <button class="bs">OKAY</button>
    <button class="bs">Kancel</button>
  </span>
  <span class="spanflex00 itemright">
    <button class="bs">SOS</button>
  </span>
</div>

<p>Phase 2: init and shrinking 0 1 100%</p> 
<div class="parent01_100perc">
  <span class="spanflex01 itemcenter">
    <button class="bs">OK</button>
    <button class="bs">Cancel</button>
  </span>
  <span class="spanflex01 itemright">
    <button class="bs">Help</button>
  </span>
</div>

<p>This method/solution can create a centred mid-part with one or two edge parts without adding empty divs or hidden elements to one of the edges.