flex是CSS3中的一种布局方式
主要介绍下弹性布局的常用的一些属性
当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。
主轴:默认水平向右(类似于X轴)
侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)
主轴方向（flex-direction)
弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图:
主轴对齐方式（justify-content）
取值:
flex-start：向主轴的开始位置对齐
flex-end：向主轴的结束位置对齐
center：居中对齐
space-around：让空白环绕盒子显示
space-between：让空白只在盒子之间显示
单行侧轴对齐方式（align-items）
取值
flex-start：向侧轴的开始位置对齐
flex-end：向侧轴的结束位置对齐
center：居中对齐
stretch：让子盒子的高度拉伸显示（默认值）
当盒子内的子元素没有高度时,会默认拉伸
是否换行（flex-wrap）
flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。
此时，如果需要设置子元素换行显示(需加在父元素身上)，可以使用属性 flex-wrap
多行侧轴对齐方式（align-content）
之前align-items 只是针对于单行元素的侧轴对齐方式。
如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行
取值（和align-items差不多）：
分配子元素空间（flex属性）
作用： 按照份数分配父元素主轴（宽度）的剩余空间
优先分配具体的宽度，剩余的空间再按照份数分配。
代码： flex:份数;
子元素排序（order属性）
作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0
代码： order：数字;
单个子元素侧轴对齐方式（align-self）
取值（和align-items取值一样）：
转载：https://blog.csdn.net/weixin_45674894/article/details/102465410
查看评论