flex(弹性盒)布局简述
弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。
1.弹性容器与弹性元素
弹性容器和弹性元素是父子关系，他们有着不同的属性。要使用弹性盒布局，必须先将一个元素设置为弹性容器。可以通过改变display来将元素变成弹性容器:display:flex。弹性容器的直接子元素(不包含孙子元素及更后代的元素)称为弹性元素。
<style>
.parent{
display: block;
}
</style>
<div class="parent">
<div class="child">
<div class="grandson"></div>
</div>
</div>复制代码在上面的例子中，parent元素是弹性容器，child元素是弹性元素，而grandson元素不是弹性元素
2.主轴与交叉轴
主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴, 默认情况下为水平方向。
交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。
3.弹性容器的属性
3.1 flex-direction
flex-direction用于指定主轴的方向与弹性元素排列的方式
可选值:
row 默认值，主轴方向为水平，元素自左向右排列
row-reverse， 主轴方向为水平,元素自右向左排列
column，主轴方向为垂直，元素自上而下排列
column-reserve，主轴方向为垂直，元素自下而上排列
3.2 flex-wrap
flex-wrap 设置弹性元素是否在弹性容器自动换行
可选值:
nowrap 默认值，不换行
wrap 空间不足时沿交叉轴换行
wrap-reverse 空间不足时沿交叉轴反向换行
3.3 justify-content
justify-content 指定如何分配主轴上的空白空间
可选值:
flex-start 元素沿着主轴始边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布在元素的两侧
flex-start space-evenly 空白分布在元素的单侧(兼容性不好)
3.4 align-content
align-content:辅轴空白空间的分配
可选值:
flex-start 元素沿着主轴始边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布在元素的两侧
flex-start space-evenly 空白分布在元素的单侧(兼容性不好)
4.弹性元素的属性
4.1 flex-grow
flex-grow指定元素的伸展的系数, 其值为整数。当父元素有剩余空间时，子元素会按照系数比例进行分配
当系数为0时，flex-grow:1，元素不伸长。
4.2 flex-shrink
flex-shrink指定弹性元素的收缩系数，当父元素中的空间不足以容纳所有的子元素时，子元素按照系数比例收缩
作者：apk无
链接：https://juejin.cn/post/7028156723185582088