CSS 的 弹性布局

1、什么是弹性布局
弹性布局(Flexible Box),简称为 Flex 布局，用来指定某元素中子元素的位置排列方式!
2、概念
1、容器(Container)
使用 弹性布局属性的元素 称为 "容器"
2、项目(Item)
容器内的所有子元素，都称之为 "项目"
3、主轴(Main axis)
决定元素排列方向的一根轴
默认是横向的轴
4、交叉轴(Cross axis)
与主轴交叉的一根轴
默认是纵向的
3、语法
1、属性 ：display
作用：将元素变为 弹性布局的容器
取值：
1、flex
将块级元素变为flex容器时使用
2、inline-flex
将行内元素变为 flex 容器时使用
注意：
将 元素 改为 flex 布局后
1、项目的float,clear都将失效
2、容器的text-align,vertical-align将失效
3、所有的项目 都将变成 块级
4、也不再会出现外边距合并的问题
2、容器属性
该组属性，要加给弹性布局的容器的，要控制所有子元素(项目)的相同位置摆放效果 共6个


1、flex-direction
作用：决定了主轴以及项目在主轴上的排列方向
取值：
1、row
默认值，主轴为水平方向的轴，起点在左端
2、row-reverse
主轴为水平方向的轴，起点在右端
3、column
主轴为纵向的轴，起点在顶端
4、column-reverse
主轴为纵向的轴，起点在底端
2、flex-wrap
作用：指定项目如何换行的(前提：所有项目在一根轴上排列不下时)
取值：
1、nowrap
默认值，即不换行
默认情况下，会调整项目的大小来适应容器
2、wrap
换行
3、wrap-reverse
3、flex-flow
作用：是 flex-direction 以及 flex-wrap 的缩写 
取值：
1、row nowrap
默认值
2、flex-direction flex-wrap

ex:
flex-flow:row-reverse wrap;
4、justify-content
作用：该属性定义了项目在 主轴上的对齐方式
取值：
1、flex-start
在主轴的起点对齐
2、flex-end
在主轴的终点对齐
3、center
居中对齐
4、space-between
两端对齐，项目之间的间隔是相等的
5、space-around
每个项目两侧的间隔是相等的
5、align-items
作用：定义项目在交叉轴上如何对齐
取值：
1、flex-start
在交叉轴的 起点对齐
2、flex-end
在交叉轴的 终点对齐
3、center
在交叉轴的 中间对齐
4、baseline 
在项目的第一行文字的基线对齐
5、stretch
默认值，如果项目未设置高度或高度为auto时，那么项目将沾满整个容器的高度 
6、align-content
作用：该属性定义了多根主轴线的对齐方式，如果项目们只有一条轴线时，该属性不起作用
1、flex-start
与交叉轴的起点对齐
2、flex-end
与交叉轴的终点对齐
3、center
与交叉轴的中间对齐
4、space-between
与交叉轴的两端对齐
5、space-around
每个轴线两侧的间距相等
6、stretch
默认值，同 align-items
3、项目属性
该组属性，要设置给 弹性布局项目 的,只控制自己特殊的显示效果 共6个
1、order
作用：指定项目的排列顺序，值越小，越靠前，默认值为 0 ，则按照代码出现的顺序排列
取值：整数数字


2、flex-grow
作用：指定项目的放大比例，默认为0。即，容器有足够剩余空间的之后，项目们如何进行放大处理。为0的话，则不放大
3、flex-shrink
作用：指定项目的缩小比例，默认为1。即，容器空间不足时，如何处理项目们的尺寸
取值：数字
4、flex-basis
作用：指定项目在"主轴"上所占据的空间
取值：
1、auto
自动，默认值，项目本身大小
2、length
自定义大小
5、flex
作用：是 flex-grow,flex-shrink,flex-basis的缩写
取值：
1、auto
等同于 1 1 auto
2、none
等同于 0 0 auto
3、grow shrink basis


ex:
flex:1 0 auto;
6、align-self
作用：指定某个项目与其他项目不一样的交叉轴对齐方式，可覆盖父元素的 align-items 属性 
取值：
1、auto
默认值，表示继承自 父元素的 align-items
2、flex-start
交叉轴起点对齐
3、flex-end
交叉轴终点对齐
4、center
交叉轴居中对齐
5、baseline
与第一行文本的基线对齐
6、stretch
等同于父元素的 stretch