根本知识点
- 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;