浅谈css实现单行多列布局的几种方式
背景
上周三参加了一场前端面试，面试过程中被面试官问到如何通过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日访问
