# FLEX 筆記4. - justify-content 決定主軸的對齊方式

- 在前面已經學會了有關 container 設置 display: flex
- 以及 flex-direction，設定主軸的資料流向
現在就來了解主軸有哪些對齊方式吧!

---

- flex 主軸的對齊方式，都是使用 justify-content 這個屬性

## flex-start(預設):

- 假設當前的 `flex-direction: row` (預設)，使用
`justify-content: flex-start`，則資料不會有變化。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  flex-direction: row; // 預設
  justify-content: flex-start; // 預設
  width: 500px;
  height: 400px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item{
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ff2a;
  color: #004466;
  text-align: center;
}
  


## center:

- `justify-content: center;` 顧名思義使資料置中

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 500px;
  height: 400px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item{
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ff2a;
  color: #004466;
  text-align: center;
}
  


## flex-end:

- 與 flex-start 倒過來的方式呈現:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 500px;
  height: 400px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item{
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ff2a;
  color: #004466;
  text-align: center;
}
  


## space-around (適當留白):

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 500px;
  height: 400px;
  background: #004466;
  margin: 0 auto;
  padding: 20px;
}

.item{
  margin-left: 10px;
  margin-right: 10px;
  width: 100px;
  background: #00ff2a;
  color: #004466;
  text-align: center;
}
  


## space-between

- 這邊先清除 CSS 裡面的 推擠屬性 margin / padding 等.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 500px;
  height: 400px;
  background: #004466;
  margin: 0 auto;
}

.item{
  width: 100px;
  background: #00ff2a;
  color: #004466;
  text-align: center;
}
  

- between，可以使左右邊完全切齊


- 後記:

開發者藉由主軸(`flex-direction`)來決定資料流向
再藉由 (`justify-content`) 來決定資料的對齊方式

---

[Mycodepen](https://codepen.io/rrpaqjcq/pen/MWraexX)

###### tags: `CSS-FLEX`