一、基本概念
css justify-content屬性定義了在一個容器中，如何將多個子元素沿着主軸進行排列，這決定了子元素在主軸上的對齊方式。
justify-content 可以取多個值，主要有：
- flex-start：子元素排列在容器的開始位置
- flex-end：子元素排列在容器的結束位置
- center：子元素居中對齊
- space-between：子元素平均分佈在容器中，第一個子元素在開頭，最後一個子元素在結尾
- space-around：子元素平均分佈在容器中，兩端留有空隙
如果容器只有一行，那麼 justify-content 控制的就是水平的對齊方式；如果容器只有一列，則控制的是垂直的對齊方式。
二、實例演示
下面的代碼演示了不同的 justify-content 屬性值對子元素排列的影響:
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
justify-content: flex-start;
}
.box {
width: 100px;
height: 100px;
background-color: #333;
margin: 10px;
}
原創文章，作者：NEKT，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/143990.html
微信掃一掃 
支付寶掃一掃 