随着移动设备的普及，响应式布局已经成为了前端开发的必备技能。Flexbox 是一种强大的布局方法，可以方便地实现响应式布局。本文将介绍如何使用 media query 和 flex-wrap 实现响应式布局。
响应式布局简介
响应式布局（Responsive Web Design）是一种网页设计的方法，在同一个网站上，根据浏览器窗口的大小不同，自适应地显示不同的布局。通常使用媒体查询（media query）和流式布局（fluid layout）来实现。
媒体查询是 CSS3 新增的一个功能，可以根据设备的属性（如屏幕宽度、屏幕比例等）应用不同的 CSS 样式。流式布局是指使用百分比单位而不是固定宽度，让布局随着浏览器窗口大小的变化而自适应。这两个技术结合起来，可以实现非常灵活的响应式布局。
Flexbox 布局简介
Flexbox 是一种新的 CSS3 布局模式，可以方便地实现各种复杂布局，包括垂直居中、等高布局等。使用 Flexbox 布局，可以让容器内的元素自动排列，并按照一定的规则进行分配位置。Flexbox 相较于传统的布局方式，具有以下优势：
- 更加灵活：Flexbox 可以根据元素的尺寸和数量进行自动排列，而不需要手动计算每一个元素的位置。
- 更加精确：Flexbox 可以对齐和分配元素的空间更加精确。
- 更加简单：Flexbox 可以用更少的 CSS 代码实现特定的布局。
Media query 实现响应式布局
首先，我们可以使用媒体查询（media query）来实现响应式布局。下面的示例代码展示了如何在不同的窗口宽度下，设置不同的 Flexbox 容器样式：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------------
-------
--------------- -
-------- -----
---------- -----
---------------- -------
-
---------- -
----------------- --------
------- -----
-------- -----
----------- -------
----- - - ------
-
------- ------ --- ----------- ------ -
------------ -
-------- - - -----
---
--
------- ------ --- ----------- ------ --- ----------- ------ -
------------ -
-------- - - -------
---
--
------- ------ --- ----------- ------ --- ----------- ------- -
------------ -
-------- - - ----
---
--
------- ------ --- ----------- ------- -
------------ -
-------- - - ----
---
--
--------
-------
------
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- --------------------------
------
-------
-------在上面的代码中，我们定义了一个 Flexbox 容器（.flex-container）和若干个 Flexbox 项目（.flex-item）。Flexbox 容器使用了 display: flex 属性，表示该容器采用 Flexbox 布局。Flexbox 项目则使用了 flex: 1 0 200px 属性，表示该项目可以伸缩，但是它的 flex-basis 值是 200px。
接着，我们定义了四个不同的媒体查询，分别针对不同的窗口宽度。在每个媒体查询中，我们都设置了不同的 flex 属性，从而实现了不同的布局效果。例如，当窗口宽度小于等于 600px 时，我们将每个 Flexbox 项目设置为100%的宽度，从而实现了垂直堆叠的效果。
Flex-wrap 实现响应式布局
除了使用媒体查询外，我们还可以使用 flex-wrap 属性来实现响应式布局。flex-wrap 属性控制容器如何在多行或多列中排列 Flexbox 项目。下面的示例代码展示了如何使用 flex-wrap 属性来实现响应式布局：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------------
-------
--------------- -
-------- -----
---------- -----
---------------- -------
-
---------- -
----------------- --------
------- -----
-------- -----
----------- -------
----- - - ------
-
----------------- -
---------- -----
-
------- ------ --- ----------- ------ -
------------------- -
------------------ -------
---
------------ -
-------- - - -----
---
--
-
------- ------ --- ----------- ------ -
------------------- -
------------------ ----
---
------------ -
-------- - - ----
---
--
--------
-------
------
---- --------------------- ------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- --------------------------
------
-------
-------在上面的代码中，我们新增了一个名为 .flex-container-1 的容器，并在该容器中使用了 flex-wrap 属性。当窗口宽度小于等于 600px 时，我们将该容器的主轴方向设置为 column，从而实现了垂直布局。当窗口宽度大于 601px 时，我们将容器的主轴方向设置为 row，从而实现了水平布局。
总结
Flexbox 是一种非常强大的 CSS3 布局模式，可以方便地实现各种复杂的布局。结合媒体查询和流式布局，可以实现非常灵活的响应式布局。在实际开发中，建议使用 Flexbox 进行布局，并根据需要使用媒体查询和流式布局来实现响应式效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65228da895b1f8cacda0bc56