CSS Flex布局

启用 flex布局

body {
    display: flex;
}

这将为 html 文档中的body容器启用 flex 布局，body作为flex 容器，其直接子元素会自动成为flex 项目。

主轴和交叉轴

在启用了flex布局的容器中，从左到右的水平方向为主轴，从上到下的垂直方向的轴为交叉轴

默认情况下（flex-direction: row;），​​主轴（main axis）是水平方向（从左到右），横轴（cross axis）是垂直方向（从上到下）​​。
如果使用 flex-direction: column;（下文中会详细讲解），则主轴变为垂直方向（从上到下），横轴变为水平方向（从左到右）。

justify-content & align-items

justify-content控制每个主轴的对齐方式，常用的值有以下几个：

flex-start，flex-end 这两个值分别设置主轴对齐方式：在起点（默认左侧）或终点（默认右侧）

center 这个值设置主轴对齐方式为水平居中

space-between将容器的空间从左到右均匀分布，第一个元素和最后一个元素接触容器边缘

space-evenly也将容器的空间从左到右均匀分布，不过第一个元素和最后一个元素不接触容器边缘，在左右侧边缘均留有空间

align-items控制每个横轴的对齐方式，常用值与justify-content相同且用法相同，只不过用来控制横轴而已

如何在容器中居中？

启用flex布局，设置justify-content & align-items的值为center即可实现

代码示例：

body {
   display: flex;
   justify-content: center;
   align-items: center
}

这个实例将body容器中的内容居中对齐

flex-direction & gap & flex-wrap & align-content

flex-direction用来调整主轴方向（主轴方向默认从左到右），常用值如下

row默认，主轴从左到右；row-reverse主轴从右到左

当这里的值为row-reverse时，justify-content的含义会根据flex-direction的值而变化

当 flex-direction: row-reverse时：

justify-content: flex-start→ 项目从​​右侧​​开始排列（原 flex-end的位置）

justify-content: flex-end→ 项目从​​左侧​​开始排列（原 flex-start的位置）

在这里，flex-start是默认值的终点（即从右侧排列）flex-end相反

column主轴从上到下

gap这个属性将在每个项目之间创建一个间隙，所填的值为间隙的大小（如10px/10em/1px 等等）。需要注意的是，第一个项目仍旧紧贴边缘

flex-wrap这个属性可以用来进行响应式布局

值为wrap时当容器没有足够的空间（在同一行）容纳项目时，将自动换行，在下一行对齐项目

值为nowrap时则相反，容器空间不足时将缩小元素，不会换行

当我们使用flex-wrap: wrap;时，主轴/横轴不再是整个容器中的部分，而是每一行都会有自己的主轴和横轴

align-content这个属性控制多行​​在横轴上的对齐方式，只有当有多行（即使用了flex-wrap: wrap;）时才有效，值与justify-content相同，但作用于​​行间距​​（垂直方向）

flex-shrink & flex-grow

我们知道，在flex布局中，容器空间过小时，项目会自动收缩，我们可以使用flex-shrink来控制这种行为（可以控制项目对应在主轴方向缩小）

这个属性是在项目中应用的东西，而不是在容器中

当flex-shrink值为0时，项目不会收缩，当容器空间过小时项目会溢出容器（这时可以使用flex-wrap调整）；当flex-shrink值为**1（默认值）**时，则会自动收缩

我们可以用这个属性控制特定的项目，在一个无论容器空间如何改变，你都希望其中有一个项目是不变的，那么就可以使flex-shrink值为0，项目始终保持原来的大小

相反，flex-grow则可以控制项目对应在主轴方向增大（当容器空间过大时，拥有此属性的项目会增大，进行填充），用法与flex-shrink相同

值得一提的是，flex-grow在同个容器中的其他项目内同时使用时，你可以给他们分配比1更大的值，不过只有将他们进行比较时才有意义。

例如，给第一个框 flex-grow: 5，第二个为 1，表示 ​​第一个项目会获得 5 份剩余空间，第二个项目获得 1 份​​，因此第一个项目会增长得更快。

max-width & min-width

max-width可以控制项目的最大宽度，例如：当值为300px时，这个项目最多只能增长到300px的宽度，达到300px时不会再增长

min-width可以控制项目的最小宽度，例如：当值为100px时，这个项目最多只能收缩到100px的宽度，达到100px时不会再收缩，会溢出

类似地，max-height和 min-height可以控制 Flex 项目的​​最大/最小高度​​，防止项目过度拉伸或压缩。

总结

一、核心概念

启用方式：给容器设置display: flex，该容器成为 “flex 容器”，其直接子元素自动变为 “flex 项目”。

轴的划分：

主轴（main axis）和交叉轴（cross axis）方向由flex-direction决定。

默认flex-direction: row时，主轴为水平方向（左→右），交叉轴为垂直方向（上→下）；

若为flex-direction: column，主轴为垂直方向（上→下），交叉轴为水平方向（左→右）。

二、flex 容器属性（控制整体布局）

对齐相关

justify-content：控制项目在主轴的对齐方式（如center居中、space-between首尾贴边均匀分布）。

align-items：控制项目在交叉轴的对齐方式（如center居中、baseline文字基线对齐）
。
align-content：仅在多行布局（配合flex-wrap: wrap）时生效，控制多行项目在整体交叉轴的对齐。

方向与换行

flex-direction：定义主轴方向（row/row-reverse/column/column-reverse）。

flex-wrap：控制项目是否换行（nowrap不换行 wrap向下换行 wrap-reverse向上换行）。

间距控制

gap：设置项目之间的间隙（不影响项目与容器边缘的距离）。

三、flex 项目属性（控制单个项目行为）

伸缩特性

flex-shrink：容器空间不足时，控制项目是否收缩（1默认收缩 0不收缩，适合固定尺寸元素如 Logo）。

flex-grow：容器空间过剩时，控制项目是否拉伸（0默认不拉伸 / 数值 > 0 时按比例分配剩余空间）。

尺寸限制

max-width/max-height：限制项目最大尺寸，避免flex-grow导致过度拉伸。

min-width/min-height：限制项目最小尺寸，避免flex-shrink导致过度收缩。

四、典型应用场景

项目居中：justify-content: center + align-items: center。

响应式多行布局：flex-wrap: wrap + gap（如卡片列表）。

比例分配空间：flex-grow按数值比例分配剩余空间（如导航栏）。

固定尺寸元素：flex-shrink: 0确保元素不被压缩。

2025.10.20

本文难免有疏漏，如需反馈或有任何建议，可联系邮箱：uu20002025@163.com