共计 1689 个字符，预计需要花费 5 分钟才能阅读完成。
根本知识点
- container 款式
- items 款式
container 是一个容器，而 items 则是蕴含在容器里的项。
display：flex
将一个元素变成 flex 容器；
container 款式
1.flex-direction: 扭转 items 的流动方向（主轴）
- row 从左到右
- column 从上到下
- row-reverse 从右到左
- column-reverse 从下到上
2.flex-wrap：扭转折行，默认值是 nowrap
备注：当给 container 固定的宽度时，往容器外面增加宽度肯定 items 时，当增加的 items 数量加起来的宽度大于 container 时，往后逐步增加的 items 会因为要使 items 共处一行，而使得本人自身的宽度发生变化。
- nowrap
- wrap
- wrap-reverse
3.jusify-content: 规定主轴对齐形式（默认主轴就是横轴）默认值是 flex-start
- flex-start items 往流动的始端顶
- flex-end items 往流动的末端顶
- center
- space-between
- space-around 在 container 容器还留有空白空间时，该属性的应用会将空白空间划分为多个局部围绕在各个 items 间接。
- space-evenly 各个 items 旁的空白空间宽度是一样的
4.align-items: 规定次轴对齐形式（默认次轴就是纵轴）默认值是 stretch
- flex-start
- flex-end
- center
- stretch 当各个 items 外面的内容大小不一样，从而导致各个 items 的高度不统一时，应用该属性会让其余 items 的高度与容器外面高度最高的 items 项保持一致。
- baseline
5.align-content: 当有多行内容时
- flex-start 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往上聚拢。将空白空间都留在下方
- flex-end 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往下聚拢。将空白空间都留在上方
- center 当容器的高度大于总 items 的高度时，会使得 items 之间留有空白空间，应用该属性会使得所有 items 项个体往中聚拢。将空白空间均匀散布在高低两边
- stretch 让空白空间在各个 items 之间均匀散布
- space-between
- space-around
items 款式
1.order：默认值是 0
规定 container 外面 items 的排列程序，order 由小到大排列
2.flex-grow 默认值是 0
能够通过该属性扩充 items 的宽度
.item:first-child{flex-glow:1;}
.item:nth-child{flex-glow:2;}
.item:last-child{flex-glow:1;}备注：相当于将 container 容器的宽度平均分，第一个和最初一个取得一份宽度，两头那份取得两份的宽度。
3.flex-shrink 默认值是 1
能够通过该属性将 items 的宽度进行缩放
属性值为 0 代表避免 items 被进行缩放
4.flex-basis
能够通过该属性管制基准宽度
默认值是 auto
总体缩写：
flex:flex-grow flex-shrink flex-basis
5.align-self
能够通过该属性定制 align-items
备注：align-items 是用来规定纵轴对齐形式的，比方你规定 align-items 的值是 flex-start，那么容器里的所有 items 都会往上顶，退出你想独自管制某一项的对齐形式，能够通过 align-self 属性来扭转。只须要在某个 items 项的选择器中退出该属性就行了，比方 align-self:flex-end.
须要留神的几个款式及属性
- display:flex;
- flex-diection:row/column;
- flex-wrap:nowrap/wrap;
- justify-content:conter/space-between;
- align-items:conter;
