這裏的“另一種”是相對目前(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 佈局教程:實例篇 作者 阮一峯