漏水热水器和湿纸箱让我学到的Flexbox布局技巧-原创手记-慕课网

热水器坏了。我走进车库，听到水流的声音。检查了家里的水龙头，都关着；马桶也没有在冲水。检查了外面，水管也关了。再检查车库，还是听到水声，可能只是燃气在加热时发出的声音。走过去一看，地上果然有水。

热水器顶部漏水，地上有水坑，地毯上也有水渍。我们地板上铺的是旧地毯，因此不是冰冷的光地板。现在地毯上有一道水流。

放在地毯上的盒子吸了水，盒子都湿透了，变得很软。盒子里的一些东西也湿透了。盒子里有一些平装书和几只《侏罗纪公园》里的恐龙玩具。书被水损了，不过晾干后大部分应该还是可以用的。

这些盒子不再结实，变得很灵活。

这些盒子就是Flexbox布局。这给了我一个类似LinkedIn的诱人标题，也给了我一个写关于Flexbox的借口。

弹性盒模型

在 CSS 中，flexbox 用于将项目以水平或垂直方式布局，形成行或列。项目会根据容器空间进行调整并填充空间。

要开始使用 flex 布局，只需在包含子元素的父容器上添加 display: flex。

    .flex-container {
      display: flex;
    }

/ 此代码用于创建一个灵活的容器，适用于响应式布局。请根据需要调整样式。 /

进入全屏，退出全屏

你可能见过这样的代码，它展示了一个flex容器包含一个div盒子。

    <flex-container>
      <div class="box"></div>
    </flex-container>

进入全屏模式退出全屏

首先决定你是否想要行或列，比如，flex-direction 的选项包括 row、row-reverse、column 和 column-reverse。row 是从左到右排列内容，row-reverse 则是从右到左排列内容。你可能猜到，column 是从上到下排列内容，而 column-reverse 则是从下到上排列内容。

    .flex-container {
      display: flex;
      flex-direction: row;
      /* .flex-container 设置为弹性布局，方向为行 */
    }

你可以切换到或退出全屏模式

    <flex-container>
      <div class="box">
       <div class="book">书 1</div>
       <div class="book">书 2</div>
       <div class="book">书 3</div>
      </div>
    </flex-container>

全屏模式退出全屏

内容两端对齐

那么该怎么水平排列呢？可以使用 justify-content（用于对齐盒子里的元素）来让盒子里的书对齐。你可以选择不同的方式。

justify-content: center - 将项目居中对齐。
justify-content: space-around - 在每个项目之间以及容器的两端放置空间。
justify-content: space-between - 将项目推到容器的两端，并在每个项目之间均匀分布空间。
justify-content: flex-start （默认）- 将项目对齐到容器的开始位置。
justify-content: flex-end - 将项目对齐到容器的末尾。

    .flex-container {
      display: flex;
      flex-direction: row;
      justify-content: center; 
    }

全屏退出全屏

一盒书的插图。三本书挨着排在一起。

这张图片显示书在盒子中居中。

一个盒子的插图。里面有三本书排成一行，旁边留有一些空隙。

这张图片展示了带有space-around的书。可以看到，框的开始和结束之间有空隙。

一本书盒的插画。三本书排成一行，旁边留了些空隙。

这张图显示了带有space-between效果的书籍。书籍被推送到盒子的中心和两端，书籍之间有空隙。

一个盒子的插图。盒子里有三本书，都挤在盒子的左半边。

这张图片显示了 flex-start，所有的书都被挤到了盒子的左边或起始位置。

三本书被推到了盒子的右边，盒子的另一边则空荡荡的。

这张图片展示了 flex-end。所有的书都被推到了盒子的右端。

对齐（如果需要具体说明，请添加相关领域的描述，例如技术对齐）

可以通过 align-items 来垂直对齐父容器内的元素。

align-items: flex-start - 在容器顶部对齐内容
align-items: flex-end - 在容器底部对齐内容
align-items: center - 垂直居中对齐内容
align-items: baseline - 沿每个项目的基线对齐内容
align-items: stretch (默认) - 拉伸项目以填充容器的高度

    .flex-container {
      display: flex;
      flex-direction: row;
      justify-content: center; 
      align-items: center;
    }

    /* 此CSS代码定义了一个flex容器，其显示模式为flex布局，主轴方向为行方向，内容沿主轴居中对齐，项目沿交叉轴也居中对齐。 */

全屏模式退出全屏

这些图片都是用CSS制作的。

结论

下面是一个关于 flexbox 的简介，了解更多可以看看 Wes Bos 的什么是 flexbox 或 MDN Web 文档中的更多解释。