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