CSS flex布局

flex：弹性盒 伸缩盒

flex 可以使元素有弹性

容器 container（父元素）  项目items（子元素）

设置弹性容器

display：flex 设置块级的弹性元素 inline-flex 行内弹性元素

（弹性容器的子元素是弹性元素 但只管子元素不管后代元素一个元素可以同时是弹性容器和弹性元素）

flex-direction 指定容器中弹性元素的排列方式

• row 默认值 弹性元素在容器中水平排列
• row-reverse 水平反向排列
• column 垂直方向排列
• column-reverse 垂直反向排列

主轴 弹性元素的排列方向

侧轴（辅轴） 与主轴垂直的就是侧轴

flex-wrap  是否换行

• wrap 换行
• nowrap 不换行

justify-content 分配主轴上的空白空间（主轴上元素如何排列）/align-content  元素在辅轴上空白空间的分布

• flex-start 主轴起边排列
• flex-end 主轴终边排列
• center 居中
• space-around 把空白分布到元素的两侧
• space-between 把空白分布到元素之间  元素两端对齐
• space-evenly 空白分布到元素单侧

align-items 元素在辅轴上如何对齐

• flex-start 辅轴起始边对齐
• flex-end 辅轴终边对齐
• center 居中
• stretch 默认值

弹性元素的属性

flex-grow  弹性增长系数 默认是0

• 当父元素有多余的空间时，元素怎么伸展
• 父元素的剩余空间，会按照比例进行分配

flex-shrink 缩减系数  默认值1

• 当父元素空间不足不足以容纳所有的子元素，如何对子元素进行收缩

flex-basis 主轴方向的基础长度

• 默认值是auto 表示参考元素本身的宽高 一般用auto
• 如果传了具体值 就以该值为准

以上3个属性可以简写为flex

flex: 增长    缩减    基础长度

0      1        auto     flex: initial 默认值

1      1        auto     flex：auto 用的多

0      0        auto     flex：none

1      1         0%      flex：1 默认= flex:auto

order 决定弹性元素的排列顺序