Css3-深入浅出篇
Flex简介：
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素会自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
一. 容器属性：
-
启用弹性盒子： display：flex
-
确认主轴方向：
1）正向
- flex-direction : row ( 横向排列 -> 由左向右 )
- flex-direction : column ( 纵向排列 -> 由上到下 )
2）反向
- flex-direction : row-reverse（ 横向排列 -> 但从右面开始排 ）
- flex-direction : column-reverse ( 纵向排列 -> 但从下面开始排 )
小结：
注：
当只设置display：flex 时
其中的元素也会横向排列，是因为其默认设置了横向排列的属性即flex-direction:row，而不是自带该排列属性。
- 主轴方向上的对齐模式 ：
1） 主轴的起始点：
- 横向布局： 主轴方向从左到右 star->end
- 纵向布局： 主轴方向从上到下 star->end
2）justify-content：
- flex-start 左对齐/顶对齐
- flex-end 右对齐/底对齐
- center 水平居中/垂直居中
- space-between 两端对齐
- space-around 平分布局 (两端的空隙是中部元素空隙的一半)
- 主轴的交叉方向：
1)交叉轴方向 : 与主轴方向垂直的方向
2)align-items：
- flex-start 交叉轴起点位置
- flex-end 交叉轴起点位置
- flex-center 交叉轴中心位置
- baseline: 项目的第一行文字的基线对齐
- flex-wrap :
- nowrap 不换行(默认)
- wrap 换行（正常方向上换行，第一行在开头）
- wrap-reverse 换行（反方向换行，第一行在下面，这里你需要实践一下，可能会和你想的样式有一些不同）
- 多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）
1)align-content :
- flex-start 与交叉轴的起点对齐
- flex-end 与交叉轴的终点对齐
- center 与交叉轴的中点对齐
- space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框 的间隔大一倍
二. 项目属性（重要4点）：
- align-self属性
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items
- align-self : auto | flex-start | flex-end | center | baseline | stretch
- flex-shrink属性
- 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-shrink : number 写负值无效
小结：
注：flex-shrink 属性定义的是缩小的比例，即值越小占的被缩小的比例越小。
例：若一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，设置属性为0的不缩小。
- flex-grow属性
- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-grow : number 写负值无效
小结：
注：flex-grow 属性定义的是放大的比例，即值越小占的被放大比例越小。
例：若一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
- order属性
- 定义项目的排列顺序。数值越小，排列越靠前，默认为0
- order : number 整数
知识点扩展即要点回忆：
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 项目默认沿主轴排列
- 主轴的开始位置叫做main start，结束位置叫做main end
- 交叉轴的开始位置叫做cross start，结束位置叫做cross end
- 单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
随心记
- flex属性
- flex 是 flex-grow、flex-shrink、flex-basis的缩写
- flex-basis：当子空间含有这个属性的时候，代表了子空间占主轴的大小
