跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的width與對齊

在上一篇文章-跟著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%)。>>有留空白，才能有空間能夠做對齊。