参见英文答案 >
Center and right align flexbox elements2
我对FlexBox来说是全新的,并且希望对齐按钮,但是我看不到如何使用仅使用FlexBox的同一行上的中心对齐按钮和右对齐按钮来处理常见的情况.
我对FlexBox来说是全新的,并且希望对齐按钮,但是我看不到如何使用仅使用FlexBox的同一行上的中心对齐按钮和右对齐按钮来处理常见的情况.
但是,我发现一种使用与右对齐项目相同长度的不可见的左对齐项目和使用空格的flex对齐内容,以使中间项目位于行上.
.flexcontainer {
display: flex;
justify-content: space-between;
width: 500px;
height: 200px;
}
.iteminvisible {
flex: 0 1 auto;
width: 100px;
height: 100px;
visibility: hidden;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
}
<div class="flexcontainer"> <div class="iteminvisible">Other</div> <div class="itemcenter">One</div> <div class="itemright">Other</div> </div>
解决方法
使用justify-content：空格与不可见的flex项目,如您的问题所述,是实现所需布局的好方法.只要注意,如果左和右项目的长度相等(
see demo),则中间项目只能居中.
您可能想要考虑的另一个解决方案涉及auto margins和absolute positioning.这种方法的两个好处是不需要额外的标记,无论项目大小,都可以实现真正的对中.一个缺点是中心的项目从document flow中删除(这可能或可能不重要).
.flexcontainer {
display: flex;
justify-content: flex-start; /* adjustment */
position: relative; /* new */
width: 500px;
height: 200px;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
position: absolute; /* new */
left: 50%;
transform: translateX(-50%);
}
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
margin-left: auto; /* new */
}
<div class="flexcontainer"> <div class="itemcenter">One</div> <div class="itemright">Other</div> </div>
更多细节在这里：Methods for Aligning Flex Items along the Main Axis(见框#62-78).
