弹性布局

Posted 2023-03-16

参考技术A 1.弹性盒子

display属性，设置元素的类型，属性值包括：none(不显示)，inline(行内元素)，block(块级元素)，inline-block(行内块元素)

设置display: flex，该盒子就成为了弹性盒子，一旦给一个盒子设置为了弹性盒子，它里面的子元素默认就会横向排列

flex-direction属性 设置子元素的排列方向，属性值包括：row(横向) column(纵向) row-reverse(横向反向) column-reverse(纵向方向)

2.子元素的对齐方式

主轴的排列方式，通过justify-content属性控制

属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)

辅轴的排列方式，通过align-items属性控制

属性值包括： flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) baseline(首行文本的基线对齐) stretch(拉伸对齐)

注意：主轴不一定是横向，排列方向如果是横向，主轴是横向；排列方向如果是纵向，主轴就是纵向

3.子元素的换行方式

flex-wrap属性，设置弹性盒子内，子元素的换行方式

属性值包括： nowrap(不换行) wrap(换行) wrap-reverse(反向换行)

align-content属性，设置子元素换行后，每行元素在辅轴上的对齐方式

注意：一旦设置了align-content，align-items属性就失效了

align-content的属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)

总结：不换行，辅轴上的对齐方式用align-items，换行后，辅轴上的对齐方式用 align-content

4.子元素order属性

order属性，用于设置子元素的排列顺序，默认值是1，值越小越靠前，值越大越靠后

5.子元素margin属性

子元素通过margin属性，可以抢占父级的剩余空间作为自己的外边距

6.子元素align-self属性

align-items属性设置所有弹性子元素在辅轴上的对齐方式

align-self属性，用于设置弹性子元素自身在 辅轴 方向上的对齐方式

属性值包括：flex-start，flex-end，center，baseline，stretch

7.子元素flex属性

flex属性用于指定弹性子元素如何分配空间

.b为flex:5，.c为flex: 1 表示剩余的空间，b占5份，c占1份