关于flex布局的部分常用属性的个人理解

学习的时候听到这么一句总结：flex布局的实质 就是通过父盒子设置display：flex来控制子盒子的排列方式。

常用的父项属性：

（以下均以横向排布为例）

1.justify-content——设置主轴上子元素排列方式

flex-start 从左到右（默认）
flex-end 从右到左
center 水平居中
space-around 每份占相同宽度，其内容居中
space-between 先两边贴边，再平分剩余空间

2.flex-wrap——设置子轴是否换行

nowrap 不换行（默认）
wrap 换行

3.align-items/align-content——设置侧轴上子元素对齐方式（单行/多行）

flex-start 靠上对齐
flex-end 靠下对齐
center 居中对其
其中，多行还存在：space-around ，space-between 与上方提到的用法相同

常用的子项属性：

1.align-self——设置侧轴上元素对齐方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性 。
默认值为auto ，表示继承父元素的 align-items 属性(flex-start、flex-end、center、stretch)，如果 没有 父元素，则等同于 stretch。
以上解释来自：https://blog.csdn.net/qq_42837306/article/details/104194107

注：stretch：元素被拉伸以适应容器。

2.order——设置子项的排列顺序

值为数字 值越小，排列越靠前，默认为0

3.flex——子项目占的份数（如果子元素超出或不足父元素时的处理方式）

flex 是 flex-grow、flex-shrink、flex-basis的缩写，所以默认有三个值：flex：0 1 auto;

flex-grow：默认值是0，代表可分配的剩余空间，与元素自身宽度无关，之能是数字，数字大于1时，剩余空间按照数字比例全部分配，数字小于1时，按照数字分配剩余空间（如 0.2代表可分配剩余空间的2/10）

flex-shrink：默认值是1，代表溢出时要压缩的比例，这与自身宽度有关，值越大，压缩的越厉害。如果值为0，表示不压缩。

flex-basis：不能为数字，可以是px单位或者百分数。

该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。 以上解释来自：https://blog.csdn.net/m0_37058714/article/details/80765562

以上仅代表我个人对flex学习后的理解与常用的属性总结，如有片面或不妥之处还望指出。