CSS Flexbox 之 justify-content

Flexbox 的 justify-content 決定 Container 中的 Item 該 靠左 、 靠右 或 置中 對齊，但 靠左對其 或 靠右對齊 是由 justify-content 與 row-direction 共同決定。

Version

CSS 3

Layout

RGB 由左至右 開始長，因為 item 總和小於 container，所以長到 900px 就停止，右側灰色為 container 底色。

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</body>
</html>

對 3 個 <div> 做 layout。

CSS

style.css

.box {
  display: flex;
  justify-content: flex-start;
  width: 960px;
  height: 240px;
  margin: auto;
  background-color: #d3d3d3;
}

.item {
  width: 300px;
}

.item1 {
  background-color: #faa;
}

.item2 {
  background-color: #afa;
}

.item3 {
  background-color: #aff;
}

第 １行

.box {
  display: flex;
  justify-content: flex-start;
}

除了設定 display 為 flex 外，還加上 justify-content 為 flex-start 。

justify-content: flex-start

從 flexbox 的開始處展開，並不一定是 由左至右 或 由上至下 ，而是由 flex-direction 決定

若沒特別指定 flex-direction ，預設為 由左至右 ，視覺上相當於 靠左對齊 。

.box 
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

若沒特別指定 flex-direction ，預設 flex-direction 為 row ，表示 由左至右 ，若特別指定為 row-reverse ，則為 由右至左 。

flex-direction: row-reverse

Flexbox 由右至左 展開

視覺上相當於 靠右對齊 。

.box {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

若設定 flex-direction 為 column ，表示 由上至下 。

flex-direction: column

Flexbox 由上至下 展開

視覺上相當於 靠上對齊 。

.box {
  display: flex;
  justify-content: flex-start;
  flex-direction: column-reverse;
}

若設定 flex-direction 為 column-reverse ，表示 由下至上 。

flex-direction: column-reverse

Flexbox 由下至上 展開

視覺上相當於 靠下對齊 。

.box {
  display: flex;
  justify-content: center;
}

若設定 justify-content 為 center ，表示 item 將 置中 於 container。

視覺上相當於 置中對齊 。