背景
上周三參加了一場前端面試，面試過程中被面試官問到如何通過css實現單行多列布局，當時沒多想直接脫口而出了flexbox和grid布局。實際上，除了這兩種方式以外，也存在其它可選方法。下面我想簡單地就這個話題展開一下。
大體來說，實現該需求可以通過以下幾種方式：
- 使用grid布局
一種瀏覽器內置的網格布局，通過該布局方式可以實現以前只能通過復雜的css框架實現的布局方式1, 5。
具體實現如下:
html
<div class="container row">
<div class="columns">
<div id="col1">
<p>Col1</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="col2">
<p>Col2</p>
</div>
<div id="col3">
<p>Col3</p>
</div>
<div id="col4">
<p>Col4</p>
</div>
<div id="col5">
<p>Col3</p>
</div>
</div>
</div>
css
div.container {
width: 100%;
}
div.container > .columns {
display: grid;
grid-row: 1 3;
grid-column: 1 5;
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(5, 20%);
}
- 使用flexbox布局
與grid布局不同，flexbox是一種一維布局，它的作用范圍僅僅限於某一行或某一列。flexbox是一種實用且靈活的布局方式，它的出現解決了之前使用定位+浮動布局難以簡單實現的一些布局樣式2。
具體實現如下:
html
<div class="container row">
<div class="columns">
<div id="col1">
<p>Col1</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="col2">
<p>Col2</p>
</div>
<div id="col3">
<p>Col3</p>
</div>
<div id="col4">
<p>Col4</p>
</div>
<div id="col5">
<p>Col3</p>
</div>
</div>
</div>
css
div.container {
width: 100%;
}
div.columns {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.columns > div {
display: inline-block;
margin: 100px;
margin-top: 10px;
}
- 使用column屬性
column系列屬性是屬於css多列布局特性的帶來的一組全新屬性，可以通過這些屬性來制定元素中列的個數，列的間距、每列的內容按照什么方式流動等等3, 4。
具體實現如下:
html
<div class="container row">
<div class="columns">
<div id="col1">
<p>Col1</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="col2">
<p>Col2</p>
</div>
<div id="col3">
<p>Col3</p>
</div>
<div id="col4">
<p>Col4</p>
</div>
<div id="col5">
<p>Col3</p>
</div>
</div>
</div>
css
.container > .columns {
-moz-columns: auto 5; /* For compatibility with mozilla browsers */
columns: auto 5;
-moz-column-rule: 2px solid gray;
column-rule: 2px solid gray;
-moz-column-gap: 100px;
column-gap: 100px;
}
.columns > div {
column-count: 1;
}
- 使用表格
通過html的表格元素，也可以實現多列布局，可以與其他屬性相結合實現水平垂直居中。
具體實現如下:
html
<div>
<table id="tb">
<tr>
<td><p>Cols</p></td>
<td><p>Cols</p></td>
<td><p>Cols</p></td>
</tr>
</table>
</div>
css
#tb {
position: relative;
width: 100%;
float: left;
clear: both; /* 添加該屬性后，元素不會與先前的浮動元素重疊，實現獨立排列 */
display: block;
width: 505px;
border: 1px solid black;
}
#tb tr > td {
padding-left: 50px;
padding-right: 50px;
border: 1px solid black;
}
- 使用相對定位 + 浮動屬性
在flexbox與grid布局出現以前最常用的多列布局實現方式，存在一定局限性，相對前兩者缺少靈活性，比較難以實現一些特殊的布局樣式
具體實現如下:
html
<div class="container row">
<div class="columns">
<div id="col1">
<p>Col1</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="col2">
<p>Col2</p>
</div>
<div id="col3">
<p>Col3</p>
</div>
<div id="col4">
<p>Col4</p>
</div>
<div id="col5">
<p>Col3</p>
</div>
</div>
</div>
css
.row {
width: 100%;
height: 500px;
margin-left: -15px;
margin-right: -15px;
}
.columns {
position: relative;
float: left;
padding-left: 15px;
padding-right: 15px;
background-color: red;
margin-left: 15px;
margin-right: 15px;
}
.columns > div {
width: 200px;
height: 300px;
}
引用來源
- CSS Grid 網格布局教程 - 阮一峰的網絡日志，於2020年12月11日訪問
- MDN - flexbox， 於2020年12月11日訪問
- CSS 多列布局，於2020年12月11日訪問
- CSS Multiple Columns，於2020年12月11日訪問
- CSS Grid Layout Module，於2020年12月11日訪問