如何使用CSS Flex对齐一行的中间和右对齐？
如何使用CSS Flex对齐一行的中间和右对齐？
提问于 2017-08-18 20:22:44
尝试过许多类似的变体，但都无法发挥作用。以下是最后一次尝试：
.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>我知道如何通过在左边放置一个“可见性:隐藏”按钮来解决这个问题，并在中间空间中使用正当内容，但我想学习/知道如何只使用CSS来实现它。
会很感激你的建议。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-08-18 21:05:15
有不止一种方法可以做到这一点。
在这里，只使用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>
上述解决方案是基于我在这里给出的答案：
这里还有3种方法，第一个示例也可以解决这个问题，而无需使用绝对位置的任何额外标记。
Stack Overflow用户
发布于 2017-08-18 20:31:49
如果您希望它完全对齐，您可以添加一个空的子div并将三个子div拆分为三分之二。
这将起作用：CodePen演示
.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演示，或者使用下面的代码片段。
.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>
Stack Overflow用户
发布于 2017-08-22 17:49:35
.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.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45764545
复制相关文章
相似问题
腾讯云开发者
