定義和(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。 |