什么是 Flexbox？
Flexbox 是一种用于布局的 CSS3 模块，它可以让我们更加轻松地实现复杂的布局效果，特别是在响应式设计中使用效果更佳。Flexbox 可以让我们更加灵活地控制元素的排列、对齐和分布。
响应式文本列表
在本文中，我们将使用 Flexbox 实现一个响应式的文本列表。这个列表会根据屏幕的大小自动调整排列方式和元素大小，以便在不同的设备上都能够得到最佳的显示效果。
HTML 结构
首先，我们需要创建一个 HTML 结构，如下所示：
-- -------------------- ---- ------- ---- ------------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
这里我们使用了一个包含 8 个子元素的 div 容器，每个子元素代表一个列表项。
CSS 样式
接下来，我们需要在 CSS 中定义样式来实现响应式的排列和对齐方式。我们使用 Flexbox 的属性来实现这些效果。
-- -------------------- ---- ------- ----- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- - ----- - ----------------- ----- ------ ----- ----------- ------- ---------- ----- -------- ----- ------- ----- ----------- ---------- - ----- - --- ---------- -- -
在这里，我们将列表容器设置为 display: flex，这样子元素会自动排列。我们使用 flex-wrap: wrap 属性来实现自动换行，这样当屏幕宽度不足以容纳所有元素时，它们会自动换行到下一行。
我们还使用了 justify-content: center 和 align-items: center 属性来实现水平和垂直居中对齐。
对于每个列表项，我们使用了 flex-basis 属性来定义它们的初始大小，这里我们使用了一个计算表达式来让它们平均分配到每一行。我们还使用了 flex-grow 属性来让它们在空间充足时自动扩展。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
----- -
-------- -----
---------- -----
---------------- -------
------------ -------
-
----- -
----------------- -----
------ -----
----------- -------
---------- -----
-------- -----
------- -----
----------- ---------- - ----- - ---
---------- --
-
--------
-------
------
---- -------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
-------总结
Flexbox 是一种非常有用的 CSS 布局模块，它可以让我们更加轻松地实现复杂的布局效果。在本文中，我们使用 Flexbox 实现了一个响应式的文本列表，它可以自动调整排列方式和元素大小，以便在不同的设备上都能够得到最佳的显示效果。希望这个示例能够帮助你更好地理解和应用 Flexbox。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656c48bed2f5e1655d4ad04d