CSS彈性盒布局的一個很實用的功能就是可以實現(xiàn)二端對齊。在這個功能中,你可以使用Flexbox容器中的justify-content屬性來實現(xiàn)你想要的效果。這個屬性可以支持的值包括以下選項:
justify-content: flex-start; /*默認值,內(nèi)容向左對齊*/ justify-content: flex-end; /*內(nèi)容向右對齊*/ justify-content: center; /*內(nèi)容居中對齊*/ justify-content: space-between; /*首個內(nèi)容到容器左側(cè),最后一個內(nèi)容到容器右側(cè),中間的內(nèi)容平均分布,即兩個內(nèi)容之間的空間相等*/ justify-content: space-around; /*首末兩個內(nèi)容到容器兩側(cè),中間內(nèi)容平均分布,即每個內(nèi)容周圍的空間相等*/ justify-content: space-evenly; /*所有內(nèi)容的空間平均分布*/
通過調(diào)整這個屬性的值,你可以輕松地在你的網(wǎng)頁中實現(xiàn)各種二端對齊的效果。
以下是一個簡單的例子,演示如何使用:flex-start屬性值將Flexbox容器中的所有子元素向左對齊:
.container { display: flex; justify-content: flex-start; }
下面是我們演示如何使用space-evenly的屬性值將Flexbox容器中的所有子元素平均分布到容器內(nèi)的空間:
.container { display: flex; justify-content: space-evenly; }
正如上面的例子所示,使用CSS彈性盒布局的 justify-content屬性,你可以輕松實現(xiàn)不同的二端對齊效果。開始使用它吧!
上一篇css 3 單個翅膀煽動
下一篇css 333 9