html – 如何对齐一个flex项目并使用Flexbox 右对齐另一个

概述参见英文答案 > Center and right align flexbox elements                                    2 我对Flexbox来说是全新的,并且希望对齐按钮,但是我看不到如何使用仅使用Flexbox的同一行上的中心对齐按钮和右对齐按钮来处理常见的情况. 但是,我发现一种使用与右对齐项目相同长度的不可见的左对齐项目和使用空格的flex对 参见英文答案 > Center and right align flexbox elements2
我对FlexBox来说是全新的,并且希望对齐按钮,但是我看不到如何使用仅使用FlexBox的同一行上的中心对齐按钮和右对齐按钮来处理常见的情况.

但是,我发现一种使用与右对齐项目相同长度的不可见的左对齐项目和使用空格的flex对齐内容,以使中间项目位于行上.

FlexBox有更直接的方法吗？

.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 >  <div >Other</div>  <div >One</div>  <div >Other</div></div>

解决方法@H_502_14@ 使用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 >  <div >One</div>  <div >Other</div></div>

更多细节在这里：Methods for Aligning Flex Items along the Main Axis(见框#62-78).

总结

以上是内存溢出为你收集整理的html – 如何对齐一个flex项目并使用Flexbox 右对齐另一个全部内容，希望文章能够帮你解决html – 如何对齐一个flex项目并使用Flexbox 右对齐另一个所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。