CSS 之 Flex 布局

基础

基本概念

1. 容器 (flex container)：采用 flex 布局的元素，被称为 flex 容器，简称“容器”
2. 项 (flex item)：flex 容器的每一个子元素被称为flex 项目，简称“项”
3. 主轴 (main axis)：区域内的盒子按照主轴方向排列，由 flex-direction 属性决定
4. 辅轴 (cross axis)：区域内的盒子可以沿辅轴发生位移或伸缩，与主轴垂直方向

---

容器的属性

1. flex-direction

• 作用：决定主轴方向
• 可选值：
  row(默认值)：主轴为水平方向，起点在左端
  row-reverse：主轴为水平方向，起点在右端
  column： 主轴为垂直方向，起点在上沿
  column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap

• 作用：如果主轴方向单行(列)无法放下所有项目，该如何换行
• 可选值：
  nowrap(默认值)：不换行
  wrap：换行，行排列顺序为自上往下
  wrap-reverse：换行，行排列顺序为自下往上

3. flex-flow

• 作用：是 flex-direction 与 flex-wrap 属性的简写
• 可选值 ： ，默认值为 row nowrap

4. justify-content

• 作用：定义项目在主轴方向上的对齐方式
• 可选值：
  flex-start(默认值)：与主轴起点对齐
  flex-end：与主轴终点对齐
  center：居中所有项，多余的空间等分放到边缘项的外部
  space-between：主轴多余的空间等分后放到项与项之间
  space-around：主轴多余的空间等分后，分别放到每一项两侧，且项与项之间的空间不会重叠

5. align-items

• 作用：定义项目辅轴方向上的对齐方式
• 可选值：
  flex-start：与辅轴起点对齐
  flex-end：与辅轴终点对齐
  center：辅轴多余的空间等分放到边缘项外部
  baseline：辅轴多余空间等分放到项与项之间
  stretch：辅轴多余空间等分后，分别放到每一项两侧，项与项之间的空间不重叠

6. align-content

• 作用：多轴线(主)的对齐方式，如果只有一条轴线(主)，该属性不起作用
• 可选值：
  flex-start：与辅轴起点对齐
  flex-end：与辅轴终点对齐
  center：与辅轴终点对齐
  space-between：辅轴多余的空间等分后放到项与项之间
  space-around：辅轴多余空间等分后放到每一项两侧，项与项之间空间不重叠
  stretch(默认)：项会沿辅轴方向填满整个容器

---

项的属性

1. order

• 作用：定义项目的排列顺序，值越小越往前，默认值为0
• 可选值：，可为负

2. flex-basis

• 作用：定义项初始宽度，默认值为 auto
• 可选值：与设置 width 值相同

3. flex-grow

• 作用：如果主轴方向有剩余空间，项放大比例，默认值为0，即不放大
• 可选值：

4. flex-shrink

• 作用：如果主轴方向空间不足，项缩小比例，默认值为1，即不缩小
• 可选值：

5. flex

• 作用：flex-grow，flex-shrink， flex-basis 属性的简写，默认值为 0 1 auto
• 可选值：第一个值为必填，后两个值可选

6. align-self

• 作用：定义单个项与其他项不同的对齐方式，覆盖 align-items 属性
• 可选值
  auto(默认值)：表示继承父容器的 align-items 属性的值
  flex-start：与辅轴起点对齐
  flex-end：与辅轴终点对齐
  center：辅轴多余的空间等分放到边缘项外部
  baseline：辅轴多余空间等分放到项与项之间
  stretch：辅轴多余空间等分后，分别放到每一项两侧，项与项之间的空间不重叠

---

进阶

对齐空间

如果 flex 项指定一侧外边距为 auto ，且该侧有剩余空间，那么该外边距会占据所有剩余空间。
实例：仅对项设置 margin 为 auto 便可达到居中效果

    
center


.container {
    width: 400px;
    height: 400px;
    background-color: red
    display: flex;
}
.item {
    margin: auto;
}

可伸缩尺寸计算

基本步骤

1. 根据轴线上所有项的 flex-basis，计算出项的初始长度和
2. 确定主轴的长度，对比项的初始长度和与主轴长度，计算剩余空间
3. 如果容器的轴方向剩余空间，则根据 flex-grow 系数来决定项伸展；如果容器轴方向空间不足，则根据 flex-shrink 系数来决定项收缩

项伸展计算

• 思路：计算出剩余空间后，项按项中 flex-grow 属性的值占所有项 flew-grow 属性值总和的比例，获取剩余空间。
• 假设主轴长度为 s ，共有 n 项，其中第 k 项的 flex-grow 为 fg_k，lex-basis 为 fb_k，则第 k 项的伸展空间计算公式如下
  伸展长度 = fg_k/sum(fg) * (s - sum(fb))

项收缩计算

思路：每个项目先用 flex-shrink 乘以 flex-basic，然后再用乘积除以每一项的 flex-shrink 与 flex-basis 的乘积之和，最后将拿到的系数乘以超出的宽度，得到该项要收缩的空间。

• 假设主轴长度为 s ，共有 n 项，其中第 k 项的 flex-shrink 为 fs_k，lex-basis 为 fb_k，则第 k 项的收缩空间计算公式如下
  收缩空间 = (fs_k * fb_k)/sum(fs * fb) * (s - sum(fb))