目录
2.justify-content主要用来设置主轴方向的对齐方式
3.flex-wrap属性控制flex容器是单行或者多行,默认不换行
4.align-content用来设置多行的flex容器的排列方式
1.flex-direction: 调整主轴方向
row:主轴方向为水平向右 column:主轴方向为竖直向下 row-reverse:主轴方向为水平向左 column-reverse:主轴方向是竖直向上。
2.justify-content主要用来设置主轴方向的对齐方式
flex-start: 弹性盒子元素将向起始位置对齐 flex-end: 弹性盒子元素将向结束位置对齐。 center: 弹性盒子元素将向行中间位置对齐 space-around: 弹性盒子元素会平均地分布在行里 space-between:第一个贴左边,最后一个贴右边,其他盒子均分,保证每个盒子之间的空隙是相等的。
3.align-items用于调整侧轴的对齐方式
flex-start: 元素在侧轴的起始位置对齐。 flex-end: 元素在侧轴的结束位置对齐。 center: 元素在侧轴上居中对齐。 stretch: 元素的高度会被拉伸到最大(不给高度时, 才拉伸)。
3.flex-wrap属性控制flex容器是单行或者多行,默认不换行
nowrap: 不换行(默认),如果宽度溢出,会压缩子盒子的宽度。 wrap: 当宽度不够的时候,会换行。
4.align-content用来设置多行的flex容器的排列方式
flex-start: 各行向侧轴的起始位置堆叠。 flex-end: 各行向弹性盒容器的结束位置堆叠。 center: 各行向弹性盒容器的中间位置堆叠。 space-around: 各行在侧轴中平均分布。 space-between: 第一行贴上边,最后一个行贴下边,其他行在弹性盒容器中平均分布。 stretch:拉伸,不设置高度的情况下。