在现代网站设计中，响应式布局已经是一项必备技能。而 CSS Flexbox 又是 CSS 中最新、最强大也是最有效的布局模型之一。本文将会详细讲述 CSS Flexbox 的响应式布局，希望能够帮助读者快速掌握这种实用技术。
什么是 CSS Flexbox
CSS Flexbox 是 CSS3 中的一个新的布局模型。它可以让我们更加方便、快速地创建复杂的布局结构，而不需要像 float 或者 position 属性一样需要繁琐的设置和计算。
Flexbox 可以使一个容器内的子项在主轴和副轴上按照一定的规则进行布局。这种规则称为“弹性布局”，它可以让我们更加灵活的控制子项的排列方式，并且适用于各种设备和布局大小。
响应式布局的意义
随着移动设备的普及，响应式布局已经成为了现代网站设计的必要技能。在不同的屏幕大小和设备上，我们需要保证网站的排版能够自动适应，以友好的方式呈现给用户。
响应式布局可以让我们通过 CSS 的规则来控制网站在不同设备上的显示效果，让用户无论是使用电脑、手机还是其他设备都能够得到最佳的用户体验。
实例与说明
下面我们通过一个例子来讲解如何使用 Flexbox 进行响应式布局。
例子
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ----------
-------
- -
------- --
-------- --
----------- -----------
-
---- -
------------ ---------- ------ ------------ -------- -------------
---------- -----
------------ ----
------ -----
-
---------- -
-------- -----
---------- -----
------- - ------
-
---- -
----- --
---------- ------
---------- ----------- - ------
------- - ---- -----
----------------- --------
----------- -------
-------- -----
-
------ ------ --- ----------- ------- -
---- -
---------- -------- - ------
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
--------
-------
------
---- ------------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
-------
-------说明
这段代码实现的是一个响应式的网格布局。我们应用了 Flexbox 的属性，使得内部的子项在主轴和侧轴上自动排列。
至关重要的是，在不同尺寸的屏幕上，我们通过 CSS 的 Media Queries 规则来控制容器和子项的布局样式，从而实现了响应式布局。
我们可以通过如下的几个关键点来解读这段代码：
Flexbox 容器
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}通过设置 .container 容器的 display 属性为 flex，我们将使用 Flexbox 布局模型对内部的子项进行排列。flex-wrap 属性设置为 wrap，可以让子项在容器内自动换行，并且通过设置左右的负 margin，使得子项能够铺满整个容器。
Flexbox 子项
-- -------------------- ---- ------- ---- - ----- -- ---------- ------ ---------- ----------- - ------ ------- - ---- ----- ----------------- -------- ----------- ------- -------- ----- -
我们使用 .box 类来指定容器内的子项，通过设置 flex: 1，我们让子项自动伸缩来占满容器的空间。同时，通过使用 min-width 和 max-width 属性来指定每个子项的最小和最大宽度，从而让它们在网格上进行自适应排列。使用 margin 属性对子项进行外边距调整，并且对其进行一些基本的样式设置。
媒体查询
-- -------------------- ---- -------
------ ------ --- ----------- ------- -
---- -
---------- -------- - ------
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-最后，在不同的屏幕尺寸大小下，我们使用 CSS Media Queries 规则来对容器和子项的布局样式进行调整。具体来说，
- 当屏幕宽度小于等于
1200px时，我们将每个子项的max-width设置为50% - 30px，从而让每行显示两个子项。 - 当屏幕宽度小于等于
768px时，我们将每个子项的max-width设置为100%，从而让每个子项全部单独占据一行。
这样，我们就实现了一个相对比较简单的响应式 CSS Flexbox 布局。
总结
CSS Flexbox 可以用于创建不同类型的布局，从简单的水平/垂直居中到复杂的多列布局，以及各种响应式布局。在掌握了基本的属性之后，你就可以快速创建自己的布局。
同时，响应式布局作为现代网站设计的重要组成部分，也需要我们不断学习和深入理解。只有掌握了响应式布局，我们才能够更好地为用户提供优秀的体验，为自己的网站设计加分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a629a948841e98942b5db9