什么是 Flexbox？
Flexbox（即 Flexible Box，弹性盒子），是 CSS3 中的一种布局模式，它可以让容器中的子元素在可用空间内进行伸缩，以适应不同的屏幕尺寸和设备类型。Flexbox 所有的布局都是基于两个概念：容器和项目。
布局示例：图片缩略图列表
一个很常见的 UI 设计里会出现图片缩略图列表，它通常以网格方式展示，包含多张图片。我们可以使用 Flexbox 布局来实现响应式的图片缩略图列表。
HTML 结构
首先，我们在 HTML 中定义一个容器元素，并在容器元素内部放置一组图片元素。HTML 结构如下：
<div class="thumbnail-container"> <img src="image/01.jpg" alt="Thumbnail Image 1"> <img src="image/02.jpg" alt="Thumbnail Image 2"> <img src="image/03.jpg" alt="Thumbnail Image 3"> <img src="image/04.jpg" alt="Thumbnail Image 4"> <img src="image/05.jpg" alt="Thumbnail Image 5"> <img src="image/06.jpg" alt="Thumbnail Image 6"> </div>
CSS 样式
在 CSS 中，我们需要针对上面的 HTML 结构编写样式，实现图片缩略图列表。
容器样式
首先，我们需要为容器定义样式：
.thumbnail-container {
display: flex; /* 设置为 Flexbox 布局 */
flex-wrap: wrap; /* 换行 */
justify-content: center; /* 水平居中 */
}上面的代码中，我们设置了 display: flex，把容器设为 Flexbox 布局；flex-wrap: wrap，当子元素超出容器宽度时，自动换行；justify-content: center，水平居中。
子元素样式
接下来，我们需要定义子元素（即图片）的样式：
.thumbnail-container img {
flex: 1 0 200px; /* 设置为相等的分配放缩，并设置初始宽度 */
margin: 5px; /* 图片之间的间距 */
}上面的代码中，我们设置了 flex: 1 0 200px，让每个图片元素都拥有相同的弹性空间，以达到等宽的效果，并设置了 margin: 5px，设定图片之间的间距。
示例代码
完整的样式代码如下：
-- -------------------- ---- ------- -------------------- - -------- ----- -- --- ------- -- -- ---------- ----- -- -- -- ---------------- ------- -- ---- -- - -------------------- --- - ----- - - ------ -- ------------------ -- ------- ---- -- ------- -- -
显示效果
最终的显示效果如下图所示：
总结
Flexbox 是一种非常方便的 CSS 布局技术，能够帮助我们实现各种不同的 UI 设计，包括图片缩略图列表。希望这篇文章能够帮助你理解 Flexbox 技术的基本概念和实际应用。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a6d5848841e989488fb0d