0
点赞
收藏
分享

微信扫一扫

浅析flex及常用语法整理

NicoalsNC 2022-05-05 阅读 54

目录

1.flex-direction: 调整主轴方向

2.justify-content主要用来设置主轴方向的对齐方式

3.align-items用于调整侧轴的对齐方式

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:拉伸,不设置高度的情况下。
举报

相关推荐

0 条评论