一、flex 容器的特性：

1、flex 布局的基本概念

• Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型，给 flexbox 的子元素之间提供了强大的空间分布和对齐能力；
• flexbox 是一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

2、 flexbox 的两根轴线

• ！！！使用 flex 布局时，首先应该想到主轴和交叉轴
• 主轴由flex-direction定义，另一根垂直于它，使用的 flexbox 的所有属性都跟这两根轴线有关。

1. 主轴、交叉轴

主轴由 flex-direction 定义，可以取 4 个值：

• row 水平方向(inline)为主轴，交叉轴为上下方向
• row-reverse 水平方向(inline)为主轴，交叉轴为上下方向
• column 上下方向为主轴(block,块排列的方向)，交叉轴为水平方向
• column-reverse 上下方向为主轴(block,块排列的方向)，交叉轴为水平方向

2.起始线和终止线

• ！！！ 根据文字的书写习惯和 flex-direction 的值来决定起始线和终止线，例如 row，英文的起始线在左边；而阿拉伯文的起始线在右边；

3、Flex 容器

• 采用了 flexbox 布局的区域就叫做 flex 容器；
• 创建 flex 容器，把容器的 display 属性的值改为 flex 或者 inline-flex；
• flex 容器中的 flex 元素的行为：
  • 元素排列为一行(flex-direction 属性的初始值为 row)；
  • 元素从主轴的起始线开始；
  • 元素不会在主维度方向拉伸，但是可以缩小；
  • 元素被拉伸以填充交叉轴(最高元素定义了容器高度)；
  • flex-basis(在未进行任何空间分配之前初始化 flex 容器中子元素的宽或高) 属性为 auto(由你定义好的宽)；
  • flex-wrap(flex 容器中有太多元素超出容器，是换行还是溢出) 属性为 nowrap(不换行，溢出)。

4、用 flex-wrap 实现多行 Flex 容器

• 虽然 flexbox 是一维模型，但是可以将 flex-wrap 属性值改为 wrap，而将 flex 项目应用到多行，但是要将每一行看做一个独立的新的 flex 容器，任何空间分布都在该行上发生，而不影响其他行。

• 属性值 wrap：项目太大而无法全部显示在一行中，则会换行显示。即子元素的总宽度大于容器最大宽度；

• 属性值 nowrap：是初始值，超出容器时会缩小以适应容器，如果无法缩小，就会溢出；

5、简写属性 flex-flow：

• flex-direction 和 flex-wrap 组合简写为 flex-flow
• 第一个属性值指定 flex-direction；
• 第二个属性值指定 flex-wrap；
• 例如：flex-flow: row wrap;

二、flex 容器内部 flex 子元素的特性：

1、flex 元素上的属性

可用空间 available space，而这三个属性就是改变可用空间的行为，对于 flex 元素的对齐行为也是很重要的

1.flex-grow

• 处理 flex 元素在主轴上增加空间的问题
• 所有flex-grow属性有值的 flex 元素会按比例分配可用空间
• 第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4, 另外两个元素各占有 1/4

2.flex-shrink

• 处理 flex 元素收缩的问题
• 赋予不同的值来控制 flex 元素收缩的程度，值大收缩程度大
• ！！！ 到最小尺寸(css 中的 min-content)后不再收缩

  min-content 这个大小是它们利用任何可以利用的自动断行机会后所变成的,一般是最长的那个单词的长度(每个单词占一行)

3.flex-basis

flex 子元素的基本大小

• flex-basis 设置为 auto 吗，这个 flex 的子元素设置了宽度吗？如果设置了，flex 子元素的大小将会基于设置的宽度。
• flex-basis 设为 auto 还是 content (在支持的浏览器中)? 如果是 auto, flex 子元素的大小为原始大小。
• flex-basis 是不为 0 的长度单位吗？如果是这样那这就是 flex 子元素的大小。
• flex-basis 设为 0 呢？如果是这样，则 flex 子元素的大小不在空间分配计算的考虑之内。
• flex-basis 设为关键字 content ，根据内容大小设置即使 flex 子元素 设置了宽度(！新关键字，兼容不太好)

2、Flex 属性的简写

1.这三个属性很少单独写，而是混合着写在 flex 简写形式中，三个数值分别表示 flex-grow，flex-shrink，flex-basis。

• flex: 1 1 auto;

2.预定义的简写形式：

• flex: initial 重置为初始值，相当于 flex: 0 1 auto；不能拉伸，可以收缩；
• flex: auto 等同于 flex: 1 1 auto；在需要的时候既可以拉伸也可以收缩
• flex: none 相当于 flex: 0 0 auto；既不能拉伸或者收缩
• flex: 常数 相当于 flex: 1 1 0

3、元素间的对齐和空间分配(给flex 容器加的)

1.align-items 属性可以使元素在交叉轴方向对齐

• stretch,初始值，默认拉伸到最高元素的高度(最高元素定义了容器高度)，填满 flex 容器
• flex-start，flex 元素按 flex 容器的顶部对齐
• flex-end，使它们按 flex 容器的下部对齐
• center，使它们居中对齐

2.justify-content 属性用来使元素在主轴方向上对齐

• stretch 和 flex-start 初始值的效果一样
• flex-start 初始值，从容器的起始线排列
• flex-end，从终止线开始排列
• center，在中间排列
• space-around，使每个元素的左右空间相等
• space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等

4、align-self(给 flex 元素加的)用于对齐单个 flex 子项

• 给单个 flex 项目明确地声明 align-self 属性
• align-items 的所有属性值和 auto(重置自身的值为 align-items 定义的值)

5、轴对齐内容—— align-content 属性

• 有一个折行的多条 flex 项目的 flex 容器，使用align-content来控制每行之间空间的分配
• 要让 align-content 生效，需要 flex 容器的 height 大于 flex 项目(所有行的总高度)的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间
• align-content: flex-start，flex 行从容器起始线排列
• align-content: flex-end，flex 行从容器终止线排列
• align-content: center，flex 行居中排列
• align-content: space-between，平均分配 flex 行之间的距离(之间的距离相等)
• align-content: space-around，所有 flex 行的左右两边距离相等
• align-content: stretch，均分整个容器距离到每个 flex 行(填充满)
• align-content: space-evenly （没有在 Flexbox 特性中定义）(展示结果和 space-between 一样)

• • 没有在 flexbox 特性中定义，而是后来添加到 Box Alignment 的特性的属性。浏览器的支持没有 flexbox 特性好

6、对齐和书写模式

• 记得这些所有的对齐方法，属性值flex-start 和 flex-end 是受书写模式的影响的。

• justify-content 的值是 flex-start 而你的书写模式是从左到右的话，那么 flex items 就会从 flex container 的左边开始排列。

• direction 属性值设成 rtl 强行让 flex 项目从右到左排列

7、对齐和 flex-direction

• 对齐是根据起始线和终止线判断的，改变对齐和 flex-direction 的值，会改变起始线，对齐的效果就会改变