这次主要介绍的是 justify-conten: space-between; 属性。
比如: 实现如下图的布局,以前常用方法是元素固定宽,然后用margin-right布局,再将最后一个元素的margin-right置为0。
使用flex布局后, 只需要一个属性就能实现,那就是:
justify-conten: space-between;
具体代码:
.parentDiv{
background: #fff;
border-radius: 10px;
padding: 20px;
height: 110px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
记住要是父元素哦。