css分布几行几列流式布局

一、效果图:

css分布几行几列流式布局

方法1:grid布局

 .container-1 { padding: 20px;  width: 800px; border: 1px solid black; margin: 0 auto; margin-bottom: 50px;
/** key words*/ display: grid; /**指定重复元素的宽度*/ grid-template-columns: repeat(auto-fill, 180px); justify-content: space-between; grid-gap: 1rem; } .container-1 .item { display: inline-block; height: 50px; border: 1px solid green; text-align: center; line-height: 50px; }

缺点:不好的地方就是兼容性问题了,IE并不支持,但是足够简洁,并且元素的宽度可以设置为固定宽度,也可以调整为百分比。

方法2:flex布局

  /**缺点就是 只能将子元素一行分成4列,切这个宽度基本没法自定义, 而且需要计算子元素的margin*/ .container-2 { width: 800px; border: 1px solid black; margin: 0 auto; margin-bottom: 50px; padding:20px;
/*** key words*/ display: flex; flex-flow: row wrap; }
.container-2 .item { width: 23%; height: 50px; border: 1px solid green; text-align: center; line-height: 50px; display: inline-block; margin: 0 1% 20px; /**有边框的情况必须加上此属性,不然一行会放不下4个*/ box-sizing: border-box; }

缺点:如果要将每行划分为几列,不仅要计算 每列的平均,还需要计算margin的值,保证总宽度为100%。tip:如果item元素有边框,必须加上box-sizing。

方法3:flex布局

 .container-3 { width: 800px; border: 1px solid black; margin: 0 auto; margin-bottom: 50px; padding:20px;
/*** key words*/ display: flex; flex-flow: row wrap; }
.container-3 .item { /**需要多少列,改变这个width的比率即可,一般情况下,会将border给隐藏 */ width: 25%; display: block; border: 1px solid green; text-align: center; margin-bottom: 10px; box-sizing: border-box; padding: 10px; }
.container-3 .item .item-inner { border: 1px solid red; line-height: 50px; }

缺点: 会增加额外的dom元素,也可以将width:25%修改为flex-basis: 25%

二、grid布局

三、flex布局


四、两列布局、三列布局


css分布几行几列流式布局》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/461.html