完美扫清Flex布局

一 初识flex

1. 开启flex布局的元素叫 flex container
   flex container里面的子元素叫做 flex items
2. 开启flex布局（两种）

display:flex	//表现为block
display:inline-flex	//表现为inline-block 

3. flex模型有两个轴 main axis（主轴）和 cross axis（侧轴）这两个轴的方向可以改变（通过flex-direction）
4. flex items默认沿着main axis（主轴）方向排列

二 flex container上的CSS

1. flex-direction（决定main axis的方向）

flex-direction: row				//默认值 从左到右
flex-direction: row-reverse		//从右到左
flex-direction: column			//从上到下
flex-direction: column-reverse	//从下到上

2. justify-content（决定flex items 在main axis的对齐方式）

justify-content: flex-start		//对齐main axis开始位置
justify-content: flex-end		//对齐main axis结束位置
justify-content: space-between	//平分间隙（边缘无间隙）
justify-content: space-evenly	//平分间隙（边缘有间隙）
justify-content: space-around	//平分间隙（边缘间隙是中间间隙的一半）

3. align-content（决定flex items 在cross axis上的对齐方式）

//对单行没效果 多行执行 flex-start flex-end center会将多行看作一个整体进行排列
align-content: stretch			//默认，无高度会被拉伸，设置高度则不会被拉伸
align-content: normal			//效果和stretch一样
align-content: flex-start		//对齐cross axis开始位置
align-content: flex-end			//对齐cross axis结束位置
align-content: center			//居中
align-content: space-between	//平分间隙（边缘无间隙）
align-content: space-around		//平分间隙（边缘间隙是中间间隙的一半）
align-content: space-evenly		//平分间隙（边缘有间隙）

4. align-items（决定flex items在cross axis的对齐方式）

//对单行也有效果 多行的话会先将区域分成N块，然后在每块中根据单行的效果排列
align-items: normal		//效果和stretch一样
align-items: stretch	//当cross axis方向没有设置size时，自动拉伸至填充flex container
align-items: flex-start	//与cross start对齐
align-items: flex-end	//与cross end 对齐
align-items: center		//居中对齐
align-items: baseline	//与内容基线对齐

5. flex-wrap（决定flex items 单行还是多行）

flex-wrap: nowrap		//默认，不换行，过多会被挤压
flex-wrap: wrap			//换行
flex-wrap: wrap-reverse	//从下往上一行一行排

6. flex-flow（flex-direction和flex-wrap的缩写，顺序随意）

flex-flow: row-reverse wrap

三 flex items上的CSS

1. order

order: 10	//order的值越小越靠前

2. align-self（覆盖align-items的设置）

align-self: normal		//效果和stretch一样
align-self: stretch		//当cross axis方向没有设置size时，自动拉伸至填充flex container
align-self: flex-start	//与cross start对齐
align-self: flex-end	//与cross end 对齐
align-self: center		//居中对齐
align-self: baseline	//与内容基线对齐

3. flex-grow（扩展main axis的剩余间隙）

flex-grow: 2
flex-grow: 0.2
//当所有flex-grow的值加起来大于1，会按各自占的份数将剩余间隙平分
//当所有flex-grow的值加起来不大于1，会按各自的值乘以剩余间隙
//最大值不能超过 max-height/max-width

4. flex-shrink（收缩main axis的超出部分）

flex-grow: 2
flex-grow: 0.2
//当所有flex-grow的值加起来大于1，会按各自占的份数将超出部分平分
//当所有flex-grow的值加起来不大于1，会按各自的值乘以超出部分
//最大值不能小于 min-height/min-width

5. flex-basis（重新设置main axis方向上的base size）

flex-basis: 200px
//flex items 最终 base size 决定权 从高到低
//min/max-height/width
//flex-basis
//width/height
//本身size 

5. flex（felx-grow/shrink/basis的缩写，可指定1/2/3个值）

//单值
flex: 1	//一个无单位的数 当作flex-grow的值
flex: 100px	//带单位的值 当作flex-basis的值
//关键字none auto initial

//双值
//第一个值必须为无单位数 为 flex-grow值
//第二个值为 无单位数（当作flex-shrink）或 一个有效宽度值（flex-basis）

//三值
//第一个 无单位数 flex-grow
//第二个 无单位数 flex-shrink
//第三个 有效宽度指 flex-basis