flex布局复习

flex-direction:主轴方向

justify-content: 设置主轴上得子元素排列方式

flex-wrap:设置子元素是否换行

align-content: 侧轴上子元素的排列方式（多行）

align-items:侧轴上子元素排列方式（单行）

flex-flow:复合属性  相当于同时设置flex-direction和flex-wrap

 

主轴x 默认水平向右

侧轴y 默认水平向下   

1. justify-content: 设置主轴上得子元素排列方式

row 默认x为主轴

row-reverse 从右往左

column 改变 主轴 为y

column-reverse 从下往上

默认和反转

子元素是沿着主轴排列的

2.justify-content: 设置主轴上得子元素排列方式(首先设置好主轴)

flex-start：x轴 从左到右

flex-end：从尾部开始排列

enter：在主轴居中对齐

space-around：平分剩余空间

space-between：先两边贴边 再平分剩余空间

3.flex-wrap:设置子元素是否换行

默认不换行

warp:换行

4.align-items: 侧轴上子元素的排列方式（单行）

flex-start:从上到下

flex-end:从下到上

center:居中

strech:拉伸 （去掉高度 ，继承父的高度 ）

5.align-content:侧轴上子元素排列方式（多行）单行使用没有效果  一般搭配flex-wrap：warp换行使用

flex-start:侧轴头部

flex-end:侧轴尾部

center:侧轴中间

space-around:侧轴平分空间

space-between:分布在两头在平分剩余空间

strech:高度平分父元素高度

6.flex-flow:复合属性 

row / column 与 warp随机组合

 

对比记忆

指定主轴：flex-direction

主轴和侧轴

justify主轴

justify-content主轴子元素排列

align侧轴

align-items侧轴单行

align-content多行 常用flex-wrap：wrap使用

flex-flow flex-direction和flex-wrap复合

 

居中对齐

justify-content:center

align-items:center

贴边平分/不贴边平分

flex-between  flex-around

 

子项常见属性 nth-child()

flex定义子项目分配剩余空间，用flex占多少空间

案例左右固定  中间用flex实现自适应宽度

案例：分蛋糕 给子元素指定flex属性

align-self:给某一个盒子指定在侧轴上的排列方式

order: 控制子项目的排列顺序