对于HTML页面块元素（display: block;）的布局，古今往来都有着诸多方案。例如鄙人最早常用的 float （浮动）对元素进行左右横向排列，再到现在主要使用的 flex 弹性布局，再到目前使用不多但非常好用的 grid 网格布局。我始终认为，一个更好的布局方式的普及，都是对前端页面设计者工作量的优化，以避免在网页开发中，为保证布局方式的实现而浪费大量无意义的精力。
Flex（弹性布局）
我们把两个 div 的父级元素增加这个属性（display: flex;）后，它就变成了一个弹性布局：
<body class="flex-frame">
<div></div>
<div></div>
</body>
.flex-frame {
display: flex;
}
div {
width: 200px;
height: 200px;
}
随后，我们开始增加div的数量，布局就变成了这样：
这并非是我没有为每个 div 固定宽和高，实际上，因为父元素宽度不够，子元素显示不下就只能被迫接受“压缩”，就像一个“弹簧”。
显然，div 被压缩会让其中的内容变得奇怪，所以我们要想办法让 div 恢复“正常”的宽度，在 flex 布局的子元素上，可以设置这样一个属性：
div {
flex: 0 0 200px;
}
flex 这个属性第1个值代表该子元素是否因父元素变宽而接受拉伸（1接受 0不接受），第2个值代表该子元素是否因父元素压缩而接受压缩（1接受 0不接受），第三个值则为子元素设定一个固定的宽度，使之不再受父元素的影响而影响。
似乎有些出乎意料，由于固定了子元素的宽度，且不允许子元素被压缩，子元素直接从父元素溢出了。那我们需要对父元素设定一个属性，如果可以让子元素在溢出时换行，显示也许会更好看些：
.flex-frame {
flex-wrap: wrap; /* 允许子元素溢出换行 */
}
嗯……这样看起来顺眼多了。
接下来是非常非常常用的水平与垂直居中：
.flex-frame {
align-content: center; /* 整体垂直居中 */
align-items: center; /* 每个子元素垂直居中 */
justify-content: center; /* 水平居中 */
}
最后，我们用可以 flex 提供的方式，对 flex 布局的子元素之间加一个边距：
.flex-frame {
gap: 24px;
}