在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情，所以我們在開發上會傾向於對flex-item設置width。
flex-item的width
html架構
<div class="row"> <!--- flex container--->
<div class="col1 col">1</div> <!--- flex item--->
<div class="col2 col">2</div> <!--- flex item--->
<div class="col3 col">3</div> <!--- flex item--->
</div>
css-設置width
.row{
display:flex;
}
.col1{
width:30%;
}
.col2{
width:30%;
}
.col3{
width:30%;
}
.
我們會用百分比來設置width,設定它在container的100%中佔了多少比例。
結果
可以看到每個col都佔了30%，container剩下了10%的空白。
用justify-content來做水平對齊
在上面的結果，我們可以看到col一個緊鄰著一個，最後則是剩下的空間。
這時候我們能夠用justify-content來做水平對齊。
justify-content是在flex-container中設置。
.row{
display:flex;
justify-content:center;
可以設置以下的對齊方式:
- flex-start(預設)
- flex-end:
- center:
- space-between:
- space-around
- space-evenly
如果想要更了解對齊方式，可以看css-tricks的介紹
這裡只簡單給個例子
.row{
display:flex;
justify-content:space-between;
KP的提醒
1.開發上,會對item設百分比的width來掌控item的width。
2.在設置item的width時，記得加起來不要超過100%。並且會留下部分的空白(所以item 的width加起來可能是90%~99%)。>>有留空白，才能有空間能夠做對齊。
