什么是 Flexbox 布局
Flexbox 是 CSS3 中新增的一种弹性盒子布局模式，它可以让我们更方便地定义和布局一组元素，适用于不同尺寸和不同方向的屏幕。
Flexbox 的主要特点
- 弹性的尺寸调整：Flexbox 可以根据容器的大小自适应缩放子元素，并自动调整子元素之间的间距。
- 简单易用的对齐方式：Flexbox 提供了多种对齐方式，易于实现各种复杂的布局。
- 支持嵌套布局：Flexbox 可以嵌套使用，适用于大型的多层级布局。
Flexbox 的基本概念
- 容器（Container）：使用
display: flex声明的元素，容器中包含了一组子元素。 - 子元素（Item）：指容器中的每一个元素，也称为 Flexbox 布局中的弹性盒子。
- 主轴（Main Axis）：Flexbox 布局中的水平方向，也称为 Flexbox 的横向轴。
- 交叉轴（Cross Axis）：Flexbox 布局中的垂直方向，也称为 Flexbox 的纵向轴。
Flexbox 的基本使用
我们可以通过 display: flex 来声明一个元素为 Flexbox 容器。默认情况下，Flexbox 是从左到右排列。我们可以通过设置 flex-direction 属性来调整主轴方向。
.container {
display: flex;
flex-direction: row; /* 横向排列 */
}实现图片列表效果的思路
我们要实现的图片列表效果如下图所示：
通过 Flexbox 布局，我们可以快捷、简单地实现这个布局。具体来说，我们可以将图片封装到一个 <div> 容器内，并将其设置为 Flexbox 容器，使其能够方便地控制其中的子元素。
核心代码如下所示：
-- -------------------- ---- ------- ------------------- - -------- ----- -- ------ ---- -- ---------- ----- -- --------- -- ---------------- -------------- -- --------- -- ------------ ------- -- ------------ -- - ----------- - ------ -------- - ------ -- ---------------- -- -------------- ----- -- -------- -- ----------- ------- -- ------- -- - ----------- --- - ---------- ----- -- ----------- -- --------------- ------- -- ------- -- -------------- ---- -- ---- -- ----------- - --- ---- ------- -- -- ----- -- ---- -- -
完整代码示例
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------------------
-------
------------------- -
-------- -----
---------- -----
---------------- --------------
------------ -------
-
----------- -
------ -------- - ------
-------------- -----
----------- -------
-
----------- --- -
---------- -----
--------------- -------
-------------- ----
----------- - --- ---- ------- -- -- -----
-
--------
-------
------
---- ---------------------------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
---- -------------------
---- ------------------------------------------------------- ---------
---------
------
------
-------
-------总结
通过本文的学习，我们学会了如何使用 Flexbox 布局来实现一个图片列表效果。本文详细地介绍了 Flexbox 布局的基本概念、使用方法以及实现图片列表效果的思路和具体代码示例。在实际开发中，我们可以根据具体需求灵活运用 Flexbox 布局，实现各种复杂布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5a1d4f6b2d6eab3e6f20e