什么是 Flexbox 布局
Flexbox 是一种强大的 CSS 布局模式，它使得在浏览器中实现响应式布局变得非常容易。Flexbox 通过将容器元素内的所有子元素排列在一条水平或垂直的主轴上，来实现灵活的布局方式。
Flexbox 提供了许多工具，例如 flex-grow、flex-shrink、flex-basis 等，可用于控制各个子元素在容器中的位置和大小。使用 Flexbox 可以实现任意多的单列和多列布局，还可以实现媒体查询引发的响应式变化。
实现响应式混排布局的方法
混排布局是指在 web 页面上同时展示多种不同大小、不同高度、不同宽度元素的一种布局方式，响应式混排布局就是这种布局方式在不同设备尺寸上自适应变化的方式。
使用 Flexbox 可以很容易地实现响应式混排布局，下面是具体步骤：
- 创建一个
display: flex;的容器元素，并确定其 flex 容器的方向。如果你想控制子元素的宽度，将容器设置为flex-direction: row;，如果你想控制子元素的高度，将容器设置为flex-direction: column;
.container {
display: flex;
flex-direction: row;
}- 根据需求为每个子元素设置
flex-grow、flex-shrink和flex-basis属性。
flex-grow属性控制子元素在容器中占据可用空间的比例，可以设置为一个数字，表示占据空间的比例。默认值是 0，表示子元素不会膨胀。flex-shrink属性控制子元素在容器中的收缩程度。默认值是 1，表示如果空间不足，将会自动缩小元素。flex-basis属性控制子元素在容器中的初始大小。可以设置一个百分比或 px 值。
-- -------------------- ---- ------- ------ - ---------- -- ------------ -- ----------- -------- - ------ - ---------- -- ------------ -- ----------- -------- - ------ - ---------- -- ------------ -- ----------- ---- -
- 根据需要使用
@media媒体查询来控制在不同设备上子元素的宽度和高度。在移动设备上，可以将容器设置为flex-direction: column;，同时更改每个子元素的宽度和高度。
-- -------------------- ---- -------
------ ----------- ------ -
---------- -
--------------- -------
-
------ -
----------- -----
-
------ -
----------- ----
-
------ -
----------- ----
-
-示例代码
HTML 代码如下：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> </div>
CSS 代码如下：
-- -------------------- ---- -------
---------- -
-------- -----
--------------- ----
-
------ -
---------- --
------------ --
----------- --------
----------------- --------
----------- -------
-------- ---- --
-
------ -
---------- --
------------ --
----------- --------
----------------- --------
----------- -------
-------- ---- --
-
------ -
---------- --
------------ --
----------- ----
----------------- --------
----------- -------
-------- ---- --
-
------ ----------- ------ -
---------- -
--------------- -------
-
------ -
----------- -----
-
------ -
----------- ----
-
------ -
----------- ----
-
-总结
使用 Flexbox 实现响应式混排布局能够轻松地让 web 页面的设计变得更具吸引力和实用性，同时也能够更好地适应各种尺寸的屏幕设备。记住以上步骤和属性，你也可以快速实现一个美观且实用的响应式混排布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518d20995b1f8cacd117244