做自(zì)由與創造的先行者

CSS align-content 屬性

CSS中文(wén)手冊

定義和(hé)用(yòng)法

align-content 屬性修改 flex-wrap 屬性的行爲。它與 align-items 相似,但(dàn)是它不對(duì)齊彈性項目,而是對(duì)齊彈性線。

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

提示:使用(yòng) justify-content 屬性可将主軸(main-axis)上(shàng)的項目水(shuǐ)平對(duì)齊。

實例

将行打包到(dào)彈性容器的中央:

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 默認值。行拉伸以占據剩餘空(kōng)間。
center 朝着彈性容器的中央對(duì)行打包。
flex-start 朝着彈性容器的開(kāi)頭對(duì)行打包。
flex-end 朝着彈性容器的結尾對(duì)行打包。
space-between 行均勻分布在彈性容器中。
space-around 行均勻分布在彈性容器中,兩端各占一半。
initial 将此屬性設置爲其默認值。參閱 initial
inherit 從(cóng)其父元素繼承此屬性。參閱 inherit
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發
下(xià)一篇:CSS align-items 屬性