Flex 全解析

前言

周末整理一下Flex相关的知识，花了一天的时间，发现细节还是挺多的，特别是flex-shrink公式想了很久。除了第一张图之外，其他的图都是手画，画的不好请见谅。

参考阮一峰老师博客：Flex 布局教程：语法篇

如图，Flex 由父容器 container 和子项目 item 组成，Flex container 和 item 有相应的css属性设置。

一、Flex 容器 container

• 两条轴：水平主轴 main axis，垂直交叉轴 cross axis，flex-direction 属性可改变主轴方向

• 主轴起点终点：起点 main start，终点 main end

• 交叉轴起点终点：起点 cross start，终点 cross end

实现Flex 布局需给父容器设置 display 属性

.container {
  display: flex | inline-flex;   /* 块级元素设置flex，行内元素设置inline-flex */
}
复制代码

相应HTML如下：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
复制代码

1、flex-direction

含义：设置主轴的方向，即 item 的排列方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

row：默认值，主轴水平方向，起点在容器左端

row-reverse：主轴水平方向，起点在容器右端

column：主轴垂直方向，起点在容器上端

column-reverse：主轴垂直方向，起点在容器下端

注释：以下未说明都以 flex-direction: row 为例

2、flex-wrap

含义：设置容器内 item 是否换行；flex-direction 的值为 row 时，每行 item 总宽 > 容器宽换行；值为 column 时，每行 item 总高 > 容器高换列

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

nowrap：默认值，不换行，item 总宽 > 容器宽，主轴宽固定，每个 item 的宽自适应

wrap：换行，第一行在上

warp-reverse：换行，第一行在下

注：换行时，有多少行，会将容器高均等分，每行是一个整体，而不是所有行作为一个整体

3、flex-flow

含义：flex-direction 和 flex-wrap 的简写

4、justify-content

含义：设置 item 作为一个整体在主轴上的对齐方式；flex-direction 的值为 row 时，在水平方向上对齐；值为 column 时，在垂直方向上对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
复制代码

flex-start：默认值，左对齐

flex-end：右对齐

center：垂直居中对齐

sapce-between：两端对齐，item 之间间隔相等

sapce-around：item 两侧间隔相等，两端 item 间隔是其他的一半

5、align-item

含义：设置 item 作为一个整体在交叉轴上的对齐方式，flex-direction 的值为 row 时，在垂直方向上对齐；值为 column 时，在水平方向上对齐

.container {
  align-item: stretch | flex-start | flex-end | center | baseline;
}
复制代码

stretch：默认值，item 未设置高或为 auto ，item 的总高和容器高一致

flex-satrt：交叉轴起点对齐

flex-end：交叉轴终点对齐

center：交叉轴居中对齐

baseline：每个item 里的第一行文字的基线（文字底部）对齐

Tip：设置水平垂直居中 .container { display: flex; justify-content: center; align-item: center; }

6、align-content

含义：容器设置了换行后，所有行作为一个整体的对齐方式；多行时，该属性才有效

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
复制代码

stretch：默认值，item 未设置高或为 auto ，每行 item 高会平分交叉轴的高

flex-satrt：交叉轴起点对齐

flex-end：交叉轴终点对齐

center：交叉轴居中对齐

sapce-between：两端对齐，每行item 之间间隔相等

sapce-around：item 两侧间隔相等，两端每行 item 间隔是其他行的一半

Tip：设置水平垂直居中 .container { display: flex; justify-content: center; align-content: center; }

注意：

1)、align-content 和 align-item 比较。

• 多行下，两个属性的 stretch 、flex-satrt、flex-end、center 实现效果类似，区别只在于换行后，justify-content 是单行作为一个整体，每行均等分高；align-content 是多行作为一个整体

• align-content 优先级比 justify-content 高

2)、align-content 和 justify-content 比较。

• 多行下，两个属性的 sapce-between 和 sapce-around 实现效果，区别只在于 justify-content 在主轴上对齐，align-content 在交叉轴上对齐

二、Flex 项目 item

• 水平、垂直尺寸：主轴尺寸 main size，交叉轴尺寸 cross size

1、order

含义： item 在容器中的排列顺序，默认为0，无论有没有换行，数值越小，顺序越靠前

.item {
  order: <integer>;
}
复制代码

2、flex-basis

含义：设置 item 的宽度，会覆盖 width，item 总宽即每个 flex-basis 值的和，默认为 auto

.item {
  flex-basis: <auto> | <percent> | <size>;
}
复制代码

• 值为0或 auto 时，如果 item 没有设置宽度，则宽度为 item 内容宽度

• 值为百分比，item 的宽度占 container 宽度的百分比

• 值为固定大小，item 的宽度即为固定大小，如果总宽 > container 宽度，并且设置了换行，则 item 换行，宽度不变；未设置换行，则 item 平分 container 宽度

Tip：建议用 flex-basis 设置 item 的宽度，而不是 width

3、flex-grow

含义：默认值为0，设置 item 放大比例

1)、每个 flex-basis 值的和 > 容器宽，无论是否换行，flex-grow 无效；

2)、每个 flex-basis 值的和 <= 容器宽：

• 当item 的宽度且 flex-basis 属性未设置，如果flex-grow 值为0或不设置，items 宽为内容宽，flex-grow 值为正整数：item 宽 = 容器宽 / (每个 item 的 flex-grow 值之和)

• flex-basis 属性设置了：item 宽 = 每个 item 已设置的宽度 + (容器宽 - item 已设置的总宽) / item 的数量

Tip：flex-grow 最好可以和 flex-basis 一起用，哪怕 flex-basis 值为0

.item {
  flex-grow: 0 | <正整数>;
}
复制代码

4、flex-shrink

含义：默认值为1，设置 item 缩小比例，只有不换行时才有效

.item {
  flex-shrink: 0 | <正整数>;
}
复制代码

1)、每个 flex-basis 值的和 <= 容器宽，无论是否换行，flex-shrink 无效；

2)、每个 flex-basis 值的和 > 容器宽：

• flex-shrink 值没设置或相同，即每个 item 均等分容器宽
• flex-shrink 和 flex-basis 值不同，如何得到 item 的宽度？

如图，每个 item 的 flex-shrink 和 flex-basis 值都设置了，容器宽为600px：

设置缩小比例为 x，1倍是 x，2倍是 2x，3倍是 3x，第一个盒子应该缩小 240px * x，第二个盒子应缩小 360px * 2x，第3个盒子应缩小 480px * 3x，三个盒子缩小的宽度加上容器宽度，等于三个盒子原来的宽度和，公式为 240 * x + 360 * 2x + 480 * 3x + 600 = 240 + 360 + 480，解出 x = 0.2，每个 item 缩小后的宽度即可得出

Tip：最好不要设置 flex-shrink 值为0，则 item 不缩小，可能会导致 item 撑出容器；并且同一条件下，flex-shrink 和 flex-grow 只有一个有效

5、flex

含义：是flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 o 1 auto

.item{
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

快捷键：auto（1, 1, auto）；none（0 0 auto）

有以下情况：

1)、flex: 1 <=> flex: 1 1 0%

2)、flex: 0 <=> flex: 0 1 0%

3)、flex: 0% <=> flex: 1 1 0%

4)、flex: 10px <=> flex: 1 1 10px

4)、flex: 2 2 <=> flex: 2 2 0%

5)、flex: 2 10px <=> flex: 2 1 10px

6、align-self

含义：为当前 item 设置在交叉轴方向的对齐方式

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

和 align-item 区别：

• align-item 是对所有 item，align-self 是对当前 item
• align-self 的 auto 值表示继承 container 属性

本文首发：Flex全解析