热水器坏了。我走进车库，听到水流的声音。检查了家里的水龙头，都关着；马桶也没有在冲水。检查了外面，水管也关了。再检查车库，还是听到水声，可能只是燃气在加热时发出的声音。走过去一看，地上果然有水。
热水器顶部漏水，地上有水坑，地毯上也有水渍。我们地板上铺的是旧地毯，因此不是冰冷的光地板。现在地毯上有一道水流。
放在地毯上的盒子吸了水，盒子都湿透了，变得很软。盒子里的一些东西也湿透了。盒子里有一些平装书和几只《侏罗纪公园》里的恐龙玩具。书被水损了，不过晾干后大部分应该还是可以用的。
这些盒子不再结实，变得很灵活。
这些盒子就是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 文档中的更多解释。