做(zuò)自(zì)由與創造的先行(xíng)者

CSS align-content 屬性

CSS中文手冊

定義和(hé)用法

align-content 屬性修改 flex-wrap 屬性的行(xíng)為(wèi)。它與 align-items 相似,但(dàn)是它不對齊彈性項目,而是對齊彈性線。

注意:必須有多行(xíng)項目,此屬性才能(néng)生效!

提示:使用 justify-content 屬性可(kě)将主軸(main-axis)上(shàng)的項目水平對齊。

實例

将行(xíng)打包到彈性容器的中央:

div {

width: 70px;

height: 300px;

border: 1px solid #c3c3c3;

display: flex;

flex-wrap: wrap;

align-content: center;

}

CSS 語法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

屬性值

描述
stretch 默認值。行(xíng)拉伸以占據剩餘空間(jiān)。
center 朝着彈性容器的中央對行(xíng)打包。
flex-start 朝着彈性容器的開(kāi)頭對行(xíng)打包。
flex-end 朝着彈性容器的結尾對行(xíng)打包。
space-between 行(xíng)均勻分布在彈性容器中。
space-around 行(xíng)均勻分布在彈性容器中,兩端各占一(yī)半。
initial 将此屬性設置為(wèi)其默認值。參閱 initial
inherit 從(cóng)其父元素繼承此屬性。參閱 inherit
網站建設開(kāi)發|APP設計開(kāi)發|小程序建設開(kāi)發
下(xià)一(yī)篇:CSS align-items 屬性