在学习了css3
之后,经常会用到的布局就是flex
布局了。
比如要实现下图的这种布局:
给父级设置display:flex
;实现一行中内容靠边对齐,则需要设置justify-content:space-between;
这样的话,最后一行不填满的情况下,就会出现下面的问题:
此时则需要对最后一行单独设置了:
下面我分几种情况进行分析:
对应的html
部分代码统一如下:
<h2 style="text-align: center">flex布局</h2><div class="wrap"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
1.5个一行的布局(指定width
为数字)
.wrap {width: 1100px;margin: 20px auto;border: 1px solid red;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 200px;height: 200px;background: green;margin-bottom: 10px;}.item:last-child:nth-child(5n - 1) {margin-right: 225px;}.item:last-child:nth-child(5n - 2) {margin-right: 450px;}.item:last-child:nth-child(5n - 3) {margin-right: 675px;}
注意上面的代码:由于class='item'
对应的div
标签,宽度是200px
,父级的宽度为1100px
,则所有的空隙间距是:100px
5个元素有4个空隙,则每个空隙的宽度是25px
;
针对最后一行,分有一个元素,有两个元素,有三个元素,有四个元素等;
//当n为1时,5n-1=4,代表是第四个元素,margin-right就是第五个元素的width+1个空隙的宽度.item:last-child:nth-child(5n - 1) {margin-right: 225px;}//当n为1时,5n-2=3,代表是第三个元素,margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度.item:last-child:nth-child(5n - 2) {margin-right: 450px;}//当n为1时,5n-3=2,代表是第二个元素,margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度.item:last-child:nth-child(5n - 3) {margin-right: 675px;}
2.5个一行的布局(指定width
为百分比)
有很多情况下,元素的宽度是百分数,而非固定的数字宽度,此时则需要计算一下
.wrap {width: 1100px;margin: 20px auto;border: 1px solid red;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 19%;height: 200px;background: green;margin-bottom: 10px;}.item:last-child:nth-child(5n - 1) {margin-right: calc(19% + 5% / 4);}.item:last-child:nth-child(5n - 2) {margin-right: calc(38% + 10% / 4);}.item:last-child:nth-child(5n - 3) {margin-right: calc(57% + 15% / 4);}
注意上面的代码:由于class='item'
对应的div
标签,宽度是19%
,父级的宽度为1100px
,则所有的空隙间距是:5%
5个元素有4个空隙,则每个空隙的宽度是5% / 4
;
针对最后一行,分有一个元素,有两个元素,有三个元素,有四个元素等;
//当n为1时,5n-1=4,代表是第四个元素,margin-right就是第五个元素的width+1个空隙的宽度.item:last-child:nth-child(5n - 1) {margin-right: calc(19% + 5% / 4);}//当n为1时,5n-2=3,代表是第三个元素,margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度.item:last-child:nth-child(5n - 2) {margin-right: calc(38% + 10% / 4);}//当n为1时,5n-3=2,代表是第二个元素,margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度.item:last-child:nth-child(5n - 3) {margin-right: calc(57% + 15% / 4);}
3.4个一行的布局(指定width
为百分比)
有很多情况下,元素的宽度是百分数,而非固定的数字宽度,此时则需要计算一下
.wrap {width: 1100px;margin: 20px auto;border: 1px solid red;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 24%;height: 200px;background: green;margin-bottom: 10px;}.item:last-child:nth-child(4n - 1) {margin-right: calc(24% + 4% / 3);}.item:last-child:nth-child(4n - 2) {margin-right: calc(48% + 8% / 3);}
注意上面的代码:由于class='item'
对应的div
标签,宽度是24%
,父级的宽度为1100px
,则所有的空隙间距是:4%
4个元素有3个空隙,则每个空隙的宽度是25px
;
针对最后一行,分有一个元素,有两个元素,有三个元素等;
//当n为1时,4n-1=4,代表是第三个元素,margin-right就是第四个元素的width+1个空隙的宽度.item:last-child:nth-child(4n - 1) {margin-right: calc(24% + 4% / 3);}//当n为1时,4n-2=3,代表是第二个元素,margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度.item:last-child:nth-child(4n - 2) {margin-right: calc(48% + 8% / 3);}
4.4个一行的布局(指定width
为数字)
.wrap {width: 1100px;margin: 20px auto;border: 1px solid red;display: flex;flex-wrap: wrap;justify-content: space-between;}.item {width: 250px;height: 200px;background: green;margin-bottom: 10px;}.item:last-child:nth-child(4n - 1) {margin-right: 283.3px;}.item:last-child:nth-child(4n - 2) {margin-right: 566.6px;}
注意上面的代码:由于class='item'
对应的div
标签,宽度是250px
,父级的宽度为1100px
,则所有的空隙间距是:100px
4个元素有3个空隙,则每个空隙的宽度是100px / 3
;
针对最后一行,分有一个元素,有两个元素,有三个元素等;
//当n为1时,4n-1=4,代表是第三个元素,margin-right就是第四个元素的width+1个空隙的宽度.item:last-child:nth-child(4n - 1) {margin-right: 283.3px;}//当n为1时,4n-2=3,代表是第二个元素,margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度.item:last-child:nth-child(4n - 2) {margin-right: 566.6px;}
上面就是4种情况,但是实际过程中,这样写的话,会比较麻烦,关键是margin-right
的数值需要计算。
elementUi
中有对应的layout
布局可以借用:
layout
布局实现flex
布局(4个元素一行)
<div style="background:#fff;border:1px solid red;height:200px;"><el-row type="flex" :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> --><!-- <el-col :span="6"></el-col> --></el-row></div>
对应的css
代码:
.el-row.el-row--flex {flex-wrap: wrap;//这行代码让内容换行展示.el-col {margin-bottom: 10px;}}.el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;}}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}
最终实现效果:
但是有个问题,如果一行5个元素,则不太好实现了。
各有利弊吧。完成!!!