在这个移动设备和桌面显示器并存的时代，设计难度增加了，需要考虑到不同设备的显示效果。Flexbox 是一种布局模式，可使响应式设计变得十分容易。本文将介绍怎样使用 Flexbox 实现响应式图片列表布局。
Flexbox 简介
Flexbox 布局模式是用于在一个父元素内部对子元素的排列方式进行控制的方法。通过将父元素定义为一个“Flex 容器”，可以对其中的子元素进行各种灵活的布局。
Flexbox 具有许多有用的属性，如 flex-direction、justify-content 和 align-items 等，它们可以帮助我们创造出各种布局方案。
实现响应式图片列表布局
假设我们有一个图片列表，需要在移动设备和桌面显示器上都具有响应式布局。我们可以使用 Flexbox 简易地实现这个效果。
步骤一：创建 HTML 结构
首先，我们需要创建一个 HTML 结构，其中包含图片列表的一些基本元素。
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
------由于这是一个基本的图片列表，我们只需要将图片元素用一个 div 包裹起来，并且给这个 div 增加一个类名。
步骤二：设置 CSS 样式
接下来，我们可以使用 CSS 样式设定 Flexbox 的属性，使得这个图片列表具有响应式布局。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- - ----- - ----------- ------ ------- ----- -
首先，我们指定了 .container 为一个 Flexbox 容器，这个容器内部的子元素将按照我们指定的属性进行排列。flex-wrap 属性指定了当 Flexbox 容器宽度不足时是否允许子元素折行。
然后，我们使用 justify-content 和 align-items 属性来进行水平和垂直居中排列。flex-basis 则指定了每个子元素的基础宽度，margin 则是子元素之间的间距。
步骤三：创建响应式变化
为了让这个图片列表具有响应式效果，我们可以设置媒体查询来控制 Flexbox 容器的宽度。
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---------- -
--------------- -------
-
----- -
----------- -----
-
-在这个响应式变化中，我们设置了一个媒体查询，当屏幕宽度小于 800 像素时，Flexbox 容器将变为垂直布局。同时，我们将每个子元素的 flex-basis 属性都设定为 100%，这确保了每个子元素都会占据整个容器的宽度。
示例代码
完整的响应式图片列表布局代码如下所示。
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
-- ---- --
---- -
------- --
-------- --
-
---------- -
-------- -----
---------- -----
---------------- -------
------------ -------
-
----- -
----------- ------
------- -----
-
-- ----- --
------ ------ --- ----------- ------ -
---------- -
--------------- -------
-
----- -
----------- -----
-
-
--------
-------
------
---- ------------------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
---- -------------
---- ----------------------------------
------
------
-------
-------总结
使用 Flexbox 布局模式可以轻松地实现响应式设计。在创建任何网站或应用程序时，都应该考虑使用 Flexbox 布局模式来使其具有更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649f267948841e9894b902b4