CSS详解系列:08-Flex容器属性align-content

fox/ 01月18日/ CSS教程/ 浏览 1638

align-content 属性与 justify-content 属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式。


属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。


提示:使用 justify-content 属性对齐主轴上的各项(水平)。

注意:容器内必须有多行的项目,该属性才能渲染出效果。


属性的可选值如下:


描述
stretch默认值,将项目拉伸以占据剩余空间
center项目在容器内居中排布
flex-start项目在容器的顶部排列
flex-end项目在容器的底部排列
space-between多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部
space-around多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等
initial将此属性设置为属性的默认值
inherit从父元素继承该属性的值




发表评论

暂无评论,抢个沙发...

客服 工单