---
# System prepended metadata

title: FLEX 筆記4. - justify-content 決定主軸的對齊方式
tags: [CSS-FLEX]

---

# 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;
}
  
```
![](https://i.imgur.com/EnqpmeX.png)

## 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;
}
  
```
![](https://i.imgur.com/FioUY6g.png)

## 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;
}
  
```

![](https://i.imgur.com/6o8lgWi.png)

## 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;
}
  
```

![](https://i.imgur.com/uS8xlnb.png)

## 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，可以使左右邊完全切齊

![](https://i.imgur.com/ktVb9rL.png)


- 後記:

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

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

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


