CSS3中的align-content屬性用于設置彈性容器內的多行內容的垂直對齊方式。
.flex-container { display: flex; flex-wrap: wrap; align-content: center; }
上述代碼設置了一個flex容器,并且使用align-content屬性將其內部的多行內容居中對齊。同時,設置了flex-wrap屬性為wrap,表示容器內的內容將會在需要時換行。
除了center這個值外,align-content還支持其他的幾個值:
.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex-container { display: flex; flex-wrap: wrap; align-content: flex-end; } .flex-container { display: flex; flex-wrap: wrap; align-content: space-between; } .flex-container { display: flex; flex-wrap: wrap; align-content: space-around; } .flex-container { display: flex; flex-wrap: wrap; align-content: stretch; }
flex-start表示多行內容在容器上方排列,flex-end表示在容器底部排列,space-between表示內容平均分布在容器內,space-around表示項之間的空間平均分布在內容周圍,stretch表示拉伸所有的行,以使它們在容器中具有相同的高度。
需要注意的是,如果彈性容器中只有一行內容,align-content屬性將不起作用。