浅谈css实现单⾏多列布局的⼏种⽅式
背景
上周三参加了⼀场前端⾯试，⾯试过程中被⾯试官问到如何通过css实现单⾏多列布局，当时没多想直接脱⼝⽽出了flexbox和grid布局。实际上，除了这两种⽅式以外，也存在其它可选⽅法。下⾯我想简单地就这个话题展开⼀下。
⼤体来说，实现该需求可以通过以下⼏种⽅式：
1. 使⽤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
width: 100%;
}
display: grid;
grid-row: 1 3;
grid-column: 1 5;
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: repeat(5, 20%);
}
2. 使⽤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
width: 100%;
}
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.columns > div {
display: inline-block;
margin: 100px;
margin-top: 10px;
}
3. 使⽤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;
}
4. 使⽤表格
通过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;
}
5. 使⽤相对定位 + 浮动属性
在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实现三列布局
}
引⽤来源
1. ，于2020年12⽉11⽇访问
2. ，于2020年12⽉11⽇访问
3. ，于2020年12⽉11⽇访问
4. ，于2020年12⽉11⽇访问
5. ，于2020年12⽉11⽇访问