Flex布局笔记

传统布局解决方案基于盒状模型，依赖display属性+position属性+float属性，它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式的实现各种页面布局。

1、Flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

给容器设置display: flex，一个flex容器就诞生了。采用Flex布局的元素，成为Flex容器(flex container)，简称“容器”。它的所有子元素自动成为容器成员，成为Flex项目(flex item)，简称“项目”。

1.1、主轴(Main Asis)与交叉轴(Cross Asis)

在flex布局中，分为主轴和交叉轴两个方向，也叫主轴和侧轴，同样的叫法有：行和列，x轴和y轴。

默认主轴方向就是x轴，水平向右，默认侧轴方向就是y轴方向，垂直向下。

1.2、方向(Direction)

flex-direction 定义了主轴的方向，决定项目是水平排列还是垂直排列。默认 row，水平排列，垂直排列值为 column。

2、轴控制器

2.1、主轴控制器：justify-content

justify-content 管理项目在主轴上的对齐与分布。

对齐类：

• flex-start(默认)：向起点对齐
• flex-end：向终点对齐
• center：居中对齐

分布类：决定了当容器有剩余空间时，这些空间时如何被分配的

• space-between：两端对齐，中间平分
• space-around：项目两侧间距相等
• space-evenly：所有间距完全相等

2.2、交叉轴控制器：align-items

align-items 管理项目在交叉轴上的对齐方式。

align-items 可选值：

• stretch(默认)：项目被拉伸以填满交叉轴。（前提是项目没有固定高度）
• flex-start：向交叉轴的起点对齐
• flex-end：向交叉轴的终点对齐
• center：在交叉轴上居中

3、Flexbox的核心分配机制

明确flex-grow，flex-shrink，flex-basis三个关键属性，掌握空间分配的“三步法”决策逻辑。

3.1、flex-basis

flex-basis 基准宽度：空间分配的计算起点，元素的“理想”尺寸。

3.2、flex-grow

flex-grow 扩张因子：当容器有剩余空间时，决定如何“瓜分”这些空间。值越大，分到的就越多。

3.3、flex-shrink

flex-shrink 收缩因子：当容器空间不足时，决定如何“分摊”超出的部分。

Flexbox的默认行为是：所有子元素的 flex-shrink 默认值为1。意思是当空间不足时，所有的子元素都得按比例去压缩。

3.4、min-width/max-width

min-width/max-width：为元素尺寸设定了 绝对的边界，它们的优先级很高，可以覆盖 flex 属性的计算结果。

结论：在构建复杂的响应式布局时，必须结合 min-width/max-width 来处理临界情况，确保内容在任何屏幕尺寸下都能稳定、可用且美观的呈现。

3.5、技巧

设置 flex-shrink: 0 或者 min-width: xxx 解决屏幕尺寸变窄时被压缩的问题。

设置max-width：xxx 解决宽屏浏览器下页面宽度过长的问题。

4、单行和多行模式

4.1、flex-wrap

默认情况下，Flexbox会尽力将所有子项放在同一行。当容器空间不足时，会导致...

1. 子项被无限压缩，尺寸和可读性严重受影响。
2. 内容溢出：子项直接超出容器边界，破坏布局。

背后原因：flex-wrap 属性的默认值为 nowrap(绝不换行)。

flex-wrap是开启多行模式的开关，为了解决压缩和溢出问题，我们需要允许子项换行。

flex-wrap 可选值：

• nowrap(默认)：绝不换行，强行挤在同一行。
• wrap：核心解决方案。空间不足时，自动将子项移至新行。
• wrap-reserve色：与 wrap 类似，但新行会出现在已有行的 上方。

4.2、align-content

开启wrap后，我们解决了换行问题，但是这些自动产生的“行”，作为一个整体，在垂直方向上如何排列呢？这时候就需要align-content属性来控制。

align-content 多行布局的指挥官，专为 多行场景 而生，用于定义 行与行 在交叉轴上的对齐和分布方式。

align-content可选值：

align-content使用前提：

1. flex-wrap 的值为 wrap 或 wrap-reserve。
2. 容器内实际发生了换行（即至少存在两行）。

5、align-self 与 order 给Flex子项多一点自由

5.1 align-self

思考：在导航栏中，所有菜单项垂直居中，但Logo需要顶部对齐？

align-self：子项自己的对齐方式，核心作用是“子项覆盖父项”。

当 flex-item 设置了 align-self，它会忽略父容器 align-items 的设定，采用自己的对齐规则。

align-self 可选值(与 align-items 基本一致)：

auto(默认)：继承父容器的 align-items 属性。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：在交叉轴上居中对齐

baseline：基于项目的第一行文字的基线对齐。

stretch：若项目无高度或为 auto，则占满整个容器高度。

5.2、order

order：重新定义视觉顺序，在不改变HTML结构的前提下，调整元素的视觉顺序。

order工作机制

1. 所有的子项的 order 的默认值为 0
2. 浏览器根据 order 值的大小排列，值越小，排列越靠前
3. order 的值可以是负数

order属性允许我们仅通过CSS来调整Flex子项的视觉排列顺序，而无需改动HTML源码。它完美体现了“内容结构(HTML)与视觉表现(CSS)分离”的原则。

order陷阱

可访问性警告，order之改变视觉，不改变DOM

• 对键盘用户的影响

用户使用Tab键导航时，焦点会按照DOM顺序移动，而不是视觉顺序，这会导致焦点在屏幕上“疯狂跳跃”，体验极差。

• 对屏幕阅读器用户的影响

屏幕阅读器同样按照DOM顺序朗读内容。视觉与听觉的顺序不匹配，会给视障用户造成严重的信息理解错误。