flex布局

之前写CSS的时候，有一些东西必须要使用 float。但是最近发现了一些问题，比如说在一个容器中，不同数量的子元素如何平均分配这个容器的宽度，如何能让元素垂直居中且水平居中等；

接下来就是说一下不同的写法：

前几天的时候，写了一个按钮的样式，要求的是要平分这个容器的宽度：

<div  id="loading" >
　　<a class="btn" onclick="onCancel()">取消</a>
　　<!--<a class="btn" onclick="save()">保存</a>-->
　　<a class="btn" onclick="onConfirmed()">确认</a>
</div>

利用nth-child：（这样写是看最后一个元素是第几个元素来判断这个容器中有几个元素）

#loading .btn:first-child:nth-last-child(1) {
width: 100%;
}
#loading .btn:first-child:nth-last-child(2),
#loading .btn:first-child:nth-last-child(2) ~ .btn {
width: 50%;
}
#loading .btn:first-child:nth-last-child(3),
#loading .btn:first-child:nth-last-child(3) ~ .btn {
width: 33%;
}

利用flex：

div#loading {
display: flex;
}
#loading >.btn{
flex-grow:1;
}

如果自身的内容大于flex布局之后的宽度那会已自身的高度为准，解决方法是：

#loading >.btn{
flex-grow:1;flex-basis: 0%

}

觉得flex布局是真的很方便呢~而且flex布局不会考虑到浮动的问题，也不考虑子元素是行内级标签还是块级标签的问题

接下来发几个个人觉得方便理解flex的链接：

https://www.cnblogs.com/lixuemin/p/6110434.html

https://segmentfault.com/a/1190000006559564

相关推荐