-
伸缩盒子模型
- 伸缩盒子模型控制的是父子关系
- 父元素：伸缩容器
- 子元素：伸缩项目
- 主轴：start-end
- 交叉轴（侧轴）
-
Flex容器
display:flex
display:-webkit-box(旧版本)
-
主轴布局方向
flex容器flex-direction：
- row
- row-reverse
- column：主轴与侧轴发生对调
- column-reverse
-
富余空间管理（主轴）
justify-content：
- flex-start
- flex-end
- center
- space-around：富余空间包含伸缩项目
- space-between：伸缩项目包含富裕空间
-
富余空间管理（侧轴）
align-items：
- flex-start
- flex-end
- baseline
- center
- stretch
-
弹性空间
flex-grow
将富裕空间分配到项目上 -
项目换行
Flex布局，如果没有执行换行，无论设置多宽都不会换行
flex-wrap: nowrap; --- 默认值，父元素宽度不够，子元素自身宽度会被压缩
flex-wrap: wrap; --- 父元素宽度不够，子元素会进行换行
flex-wrap: wrap-reverse; --- 子元素换行的同时，侧轴的start与end发生对调
出现flex-wrap：wrap；之后，出现单行的富裕空间
注意：align-items 每一行的富裕空间，align-items: flex-start;
-
控制整体侧轴的富裕空间
align-content: flex-start; --- 项目整体进行打包，放在整体侧轴的start处
align-content: flex-end; --- 项目整体进行打包，放在整体侧轴的end处
align-content: center; --- 项目整体进行打包，放在整体侧轴的center处;
-
flex-flow
是flex-wrap 与 flex-direction 的缩写
flex-flow:wrap-reverse column-reverse;
-
order
order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列
order是沿着主轴方向进行排序的
-
项目自身侧轴的富裕空间
每一个项目控制自身的侧轴
align-self: flex-start;
align-self: flex-end;
align-self: center;
-
收缩率（flex项目）
当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫 收缩因子（收缩率）
flex-shrink:拉伸因子 0 ---不拉伸
flex-shrink:收缩因子 默认值：1 --- 收缩
-
子元素的基准值
flex-basis：0
-
flex属性
flex-basis,flex-grow,flex-shrink的缩写