html – flexbox对齐列左右

概述学习如何使用flexbox，与典型的css我可以浮动两列之间的左侧和另一个右边与一些沟槽空间之间。我如何用flexbox做这个？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; 学习如何使用flexBox，与典型的CSS我可以浮动两列之间的左侧和另一个右边与一些沟槽空间之间。我如何用flexBox做这个？

http://jsfiddle.net/1sp9jd32/

#container {  wIDth: 500px;  border: solID 1px #000;  display: -webkit-flex;  display: -ms-flexBox;  display: flex;}#a {  wIDth: 20%;  border: solID 1px #000;}#b {  wIDth: 20%;  border: solID 1px #000;  height: 200px;}

<div ID="container">  <div ID="a">    a  </div>  <div ID="b">    b  </div></div>

解决方法 您可以将justify-content：space-between添加到父元素。在这样做的时候，孩子们的flexBox物品将与它们之间的空间对齐。

Updated Example

#container {    wIDth: 500px;    border: solID 1px #000;    display: flex;    justify-content: space-between;}

#container {    wIDth: 500px;    border: solID 1px #000;    display: flex;    justify-content: space-between;}#a {    wIDth: 20%;    border: solID 1px #000;}#b {    wIDth: 20%;    border: solID 1px #000;    height: 200px;}

<div ID="container">    <div ID="a">        a    </div>    <div ID="b">        b    </div></div>

您还可以向第二个元素添加margin-left：auto，以便将其向右对齐。

Updated Example

#b {    wIDth: 20%;    border: solID 1px #000;    height: 200px;    margin-left: auto;}

#container {    wIDth: 500px;    border: solID 1px #000;    display: flex;}#a {    wIDth: 20%;    border: solID 1px #000;    margin-right: auto;}#b {    wIDth: 20%;    border: solID 1px #000;    height: 200px;    margin-left: auto;}

<div ID="container">    <div ID="a">        a    </div>    <div ID="b">        b    </div></div>

总结

以上是内存溢出为你收集整理的html – flexbox对齐列左右全部内容，希望文章能够帮你解决html – flexbox对齐列左右所遇到的程序开发问题。

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