2 min to read

浅谈CSS实现单行多列布局的几种方式

Imagem de capa

背景

上周三参加了一场前端面试，面试过程中被面试官问到如何通过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

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%);
}
  1. 使用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;
}
  1. 使用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;
}
  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;
}
  1. 使用相对定位 + 浮动属性

在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;
}

引用来源

  1. CSS Grid 网格布局教程 - 阮一峰的网络日志，于2020年12月11日访问
  2. MDN - flexbox， 于2020年12月11日访问
  3. CSS 多列布局，于2020年12月11日访问
  4. CSS Multiple Columns，于2020年12月11日访问
  5. CSS Grid Layout Module，于2020年12月11日访问