Flex弹性盒子布局

总结flex布局原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排序方式

flex布局父项常见属性

常见父项属性

1.flex-direction: 设置主轴的方向
2.justify-content: 设置主轴上的子元素排列方式
3.flex-wrap: 设置子元素是否换行
4.align-items: 设置侧轴上的子元素排列方式（单行）
5.align-content: 设置侧轴上的子元素的排列方式（多行）
6.flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction

设置主轴的方向 决定子元素在父元素中的排列方式

属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

属性值

row: 默认从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上

justify-content

设置主轴上的子元素排列方式

属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是那个

flex-start: 默认值从头部开始 如果主轴是x轴，则从左到右
flex-end: 从尾部开始排列
center: 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around: 平分剩余空间
space-between: 先两边贴边 再平分剩余空间

flex-wrap

设置子元素是否换行 子元素在父元素盒子中是否换行(列)

默认情况下，项目都排在一条线（又称 "轴线"）上。flex-wrap属性定义，flex布局默认是不换行的。

nowrap: 默认值，不换行
wrap: 换行或换列
wrap-reverse: 换行或者换列，但以相反的顺序

align-items

设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项的时候使用

flex-start: 默认值 从上到下
flex-end: 从下到上
center: 挤在一起居中（垂直居中）
stretch: 拉伸

align-content

设置侧轴上的子元素的排列方式

设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

flex-start: 默认值在侧轴的头部开始排列
flex-end: 在侧轴的尾部开始排列
center: 在侧轴中间显示
space-around: 子项在侧轴平分剩余空间
space-between: 子项在侧轴先分布在两头，再平分剩余空间
stretch: 设置子项元素高度平分父元素高度

align-content 和 align-items区别
1.align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
2.align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
3.总结就是单行找align-items，多行找align-content

flex-flow

是flow-direction 和 flex-wrap属性的复合属性

例：flex-flow: row wrap;

其他属性 子元素属性

​ flex-basis: 设置弹性盒伸缩基准值
​ flex-grow: 设置弹性盒子的扩展比率
​ flex-shrink: 设置弹性盒子的缩小比率
​ flex: flex-grow、flex-shrink、flex-basis的缩写
​

flex简写
flex: auto; flex: 1 1 auto;
flex: none; flex: 0 0 auto; -- width以自定义为准 不允许扩大 不允许缩小
flex: 0%; flex: 1 1 0%;
flex: 100px; flex: 1 1 100px;
flex: 1; flex: 1 1 0%;