Flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

本文将详细讲解flex布局的各个属性以及用法。为了方便演示，我们先在HTML中创建一个容器，容器中放置4个数字方块。

   <div class="container">
        <div class="box" id="box1">1</div>
        <div class="box" id="box2">2</div>
        <div class="box" id="box3">3</div>
        <div class="box" id="box4">4</div>
    </div>

启用flex布局

给每个方块设置颜色属性已经容器的宽高信息。通过给父容器设置display: flex属性来启用flex布局。

.container {
    display: flex;   /* 启用flex布局 */
    border: 2px solid black;
    height: 90vh;
}

.box {
    width: 100px;
    height: 100px;
    font-size: 4.5em;
    border-radius: 8px;
    text-align: center;
}

#box1 {
    background-color: #c54e4f;
}

#box2 {
    background-color: #c6b751;
}

#box3 {
    background-color: #63ca53;
}

#box4 {
    background-color: #51a1cc;
}

此时浏览器渲染如下：

flex-direction

这个属性用于控制flex布局方向，可用的值为’column’, ‘column-reverse’, ‘row’, ‘row-reverse’

• column：纵向布局
• row：横向布局

在每个参数后加上“-reverse”可以反向排列。

gap

这个参数用于控制元素之间的距离，比如给容器加上如下样式

.container {
    gap: 20px;
}

gap属性会同时调整main-axis和cross-axis上的距离，如果要单独调整，可以使用column-gap和row-gap属性

justify-content

这一参数用于调整主轴（main-axis）上的排列方式，可选的值有“center”, “space-around”, “space-between”, “flex-start”, “flex-end”等。

• center: 用于元素居中显示，容器之间的距离由gap决定
• space-around：元素之间和容器边缘都有空隙，容器之间的距离自动计算得出
• space-between：元素和容器紧贴，元素之间有空隙

align-items

用于控制 cross-axis （交叉轴？）上元素的排列方式，常用属性为“center”, “flex-start”, “flex-end”

• center：居中显示
• flex-start：默认值，靠上
• flex-end：靠下

flex-wrap

当我们的元素较多时，将会被挤压。而如果给父容器设置 flex-wrap: wrap; 属性，那么就能让元素自动换行。flex-wrap: wrap-reverse; 会使元素向上换行

main-axis & cross-axis

关于这两个轴的判断需要再多提一嘴，main-axis为元素排列方向的轴，cross-axis是另外那个轴，也就是说。flex-direction不一样时这两个轴的方向也是不一样的。