随着移动设备的普及，越来越多的网页需要实现自适应布局。而传统的网格布局方式使用 CSS float 和 position 属性显得效率低下且容易出错。Flexbox 布局方案则在这种情况下应运而生，其提供了更加灵活且易于管理的布局方法，适用于响应式设计和各种屏幕尺寸。
什么是 Flexbox？
Flexbox 是 CSS3 引入的一种布局方案，它使用 flex container 和 flex item 两种角色来定义。Flex container 是指包含 flex item 的父元素，而 flex item 则是该容器中的直接子元素。Flexbox 的工作原理是将一个基于主轴（main axis）和交叉轴（cross axis）的平面进行分割，然后让 flex item 按此分割线排列。
Flexbox 布局的要点包括以下几个方面：
主轴和交叉轴：Flexbox 布局的关键在于确定主轴和交叉轴。主轴是指 flex item 排列的方向，可以是从左到右（默认）、从右到左、从上到下、从下到上。而交叉轴则是与主轴垂直的轴，通常是用于对齐和对其 flex item。交叉轴的方向和主轴相对。
Flex container 和 Flex item：Flexbox 布局的核心是 flex container 和 flex item。Flex container 可以是任何元素，包括
<div>、<nav>等 HTML 元素。而 flex item 则必须是 flex container 的直接子元素。影响排列的属性：Flexbox 布局中有多项属性可以控制 flex item 的排列方式，包括 flex-direction、justify-content、align-items 和 align-self 等。这些属性可以通过设置在 flex container 或者 flex item 上来达到不同的布局效果。
现在，我们具体来看一个使用 Flexbox 实现自适应网格布局的案例。假设我们要实现一个 3 列布局，在屏幕宽度小于 800px 时，该布局变为 2 列，小于 500px 时则为 1 列。
HTML 代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------展开代码
CSS 代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- - ----- - ------ ------------- - ------ -------------- ----- - ------ ------ --- ----------- ------ - ----- - ------ -------- - ------ - - ------ ------ --- ----------- ------ - ----- - ------ --------- - ------ - -展开代码
上述代码实现了一个网格布局，并使用了 flex-wrap 属性和媒体查询来实现响应式布局。具体说明如下：
.container 类作为 Flex container，设置 display: flex; 来开启 Flexbox 布局。
设置 flex-wrap: wrap; 属性来实现当 flex item 超出 flex container 大小时自动换行。
使用 justify-content: space-between; 属性来让 flex item 自动平均分布在 flex container 容器宽度上。
利用 calc() 函数来计算 flex item 的宽度，-10px 是为了在 flex item 之间留出空隙。
通过媒体查询来实现当屏幕宽度小于特定值时响应式调整。
总结
Flexbox 布局是一种非常实用的 CSS 布局方案，可以实现高效、灵活的自适应网格布局。通过掌握 Flexbox 的核心概念和相关属性，可以让我们更加高效地完成网页布局工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649be04e48841e98948a2aa8
