弹性盒子深度使用

一、flex使用

使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局
区别：

【注】一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽，默认为100%；
inline-flex：如果没有设置宽，，默认为所有子元素的宽的和。

二、flex-wrap属性

规定flex容器是单行还是多行，是否换行
nowrap:不换行（默认值）
wrap：换行
wrap-reverse 反向换行。

如果内容过多不换行，将自适应的缩小子元素的宽度。

三、flex-direction属性

用于设置盒子中的子元素的排列方向。

row 从左到右水平排列子元素（默认值）
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素

四、justify-content属性

用于控制弹性元素在主轴上的排列方式。

flex-start 元素紧靠主轴的起点（默认值）
flex-end 元素紧靠主轴的终点
center 元素在主轴上居中。
space-between 第一元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 元素间距平均分配

五、align-items属性

控制元素在侧轴上的排列方式。
多行单行都适用的属性。
alingn-items

flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

六、align-content属性

控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点
center 元素在行中居中
space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
space-around 元素在侧轴方向上的间隔相等。
space-evenly 元素间距离平均分配

七、align-self属性，用于单个元素

用于控制单个元素在侧轴上的排列方式。

stretch 拉伸
flex-start 侧轴开始的地方对齐
flex-end 侧轴结束的地方对齐
center 中间对齐

八、flex-grow属性

用于将弹性盒子的可用空间，按照比例分配给弹性元素。
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
flex: 200px 1;//子元素

九、flex-shrink属性

flex-shrink: 0 来固定元素不被挤压，子元素宽超过父元素时候

在弹性盒子装不下子元素时，对子元素缩小的比例设置。

设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。

十、flex-basis属性

大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。

十一、order属性

用整数值来定义排列顺序，数值小的排在前面。可以为负值。

链接: https://blog.csdn.net/xh0112/article/details/111483139.