css3弹性盒布局之伸缩行对齐

发布时间:2020-10-27 23:19:58 浏览量:879 标签: css3 弹性布局

今天我们来说一下伸缩行对齐是如何实现的!伸缩行对齐是由align-content属性来实现的。该属性适用于伸缩容器,类似于伸缩项目在主轴上使用justify-content属性。

注意:此属性在只有一行的伸缩容器上面没有效果

一、使用方式

align-content:flex-start、flex-end、center、space-between、space-around、 stretch


属性值之间使用中文顿号进行区分(方便学习查看)。

二、属性值

1、flex-start:各行向伸缩容器的起点位置堆叠;

2、flex-end:各行向伸缩容器的结束位置堆叠;

3、center:各行向伸缩容器的中间位置堆叠;

4、space-between:各行在伸缩容器中平均分布;

5、space-around:各行在伸缩容器中平均分布,但在两边各有一半的空间;

6、stretch:默认值,各行将会伸展以占用剩余空间;




评论
登录后才可以进行评论哦! QQ登录
验证码
评论内容