css flex justify-content屬性，子元素在主軸上的對齊方式。

justify-content屬性控制子元素在主軸上的對齊方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around對齊方式。

justify-content屬性

可選值說明

flex-start默認值，向主軸start位置對齊，當flex-direction:row 時可以理解成左對齊

flex-end向主軸end位置對齊,當flex-direction:row 時可以理解成右對齊

center居中對齊

space-between兩邊對齊，每個子元素的間隔相等

space-around每個子元素的間隔相等，因此子元素的間隔比子元素與邊框的間隔大一倍

flex-start例子

.boxs

{

width:80%;

height:100px;

border:1px solid #333;

display:flex;

justify-content:flex-star;

}

.boxs div

{

width:20%;

}

子元素A子元素B子元素C子元素D

例子

flex-end例子

例子

center例子

例子

space-between例子

例子

space-around例子

例子

總結

以上是生活随笔為你收集整理的flex 换主轴后子元素占满_css flex justify-content属性，子元素在主轴上的对齐方式。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。