flex均匀布局
介绍:
felx布局属于弹性布局的一种,主要作用是页面布局不因终端的尺寸发生变形,以前一直使用bootstrap的栅格系统去实现;前两天组里培训了flex,记录以下内容加深理解。
背景:
我要实现一个容器内的子元素平均分布在容器内,并且在容器宽度变化时,子元素可以换行并且依然均匀分布。效果如下:
元素结构
<div class="container"> <span class="bg_red"></span> <span class="bg_green"></span> <span class="bg_black"></span> <span class="bg_blue"></span> <span class="bg_pink"></span> </div>
简单实现:
通过父元素的text-aligin:justify,子元素inline-block;代码如下:
.container {
text-align: justify;
background:rgb(42, 157, 165)
}
.container > span {
display: inline-block;
font-size: 2em;
height: 5em;
width: 5em;
}
效果如下:
完蛋,效果未完成,css应该没有问题,坑在这里:我的子元素数量是5个,但是填不满父元素的宽度;如果我的子元素能够多起来的话,效果应该就会出来了,如下图:
注意上图的第一行与第二行的变化:第一行的子元素实现了平均分布在容器内,但第二行的子元素还是默认的text-align:left效果,只有当第二行沾满父元素容器时才会均匀分布,如下:
综上所述,虽然text-align:justify; display:inline-block 可以实现均匀分布;但是对于元素的数量有限制;实用性低。
主角登场:
应用flex属性实现任意元素均匀分布在父元素内:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background:rgb(42, 157, 165)
}
.container > span {
display: inline-block;
font-size: 2em;
height: 5em;
width: 5em;
}
效果如下:
可以看到,任意个数的子元素都可以在父元素中均匀分布。
浏览器支持情况:
关于flex属性的详细介绍,移步我优秀同事的文章https://www.cnblogs.com/loveyt/p/10385516.html