这里的“另一种”是相对目前(2018.10.08)较为普遍应用的栅格系统(float布局)而言。本文的观点当然不是原创,只是从码者自身出发,整理自己的所学所用。
没错,就是flex布局
文末有阮一峰老师的flex布局教程,不熟悉的同仁可以先跟阮老师学习一下flex的基本用法。
码者认为,不同于float布局设置某标签(内容)自身的css属性,flex布局的核心是造一个容器(相当于bootstrap里的row),设定盒子里面的布局规则(当然也是css)
.tar{
width: 600px;
margin: 100px auto;
border: 1px #000 solid;
display: flex; // 设置为flex容器
flex-wrap: wrap; // 多行
justify-content: flex-start;
}
.tar div{
border: 1px #888 solid;
height: 60px;
background: #aaa;
margin: 10px;
width: calc(33% - 20px); // 注意减号两边要有空格(复制时可能丢失)
/* 这里可以通过媒体查询设置不同屏幕上的宽度 */
}
<div class="tar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
参考
Flex 布局教程:语法篇 作者 阮一峰
Flex 布局教程:实例篇 作者 阮一峰