# DAY6 - FLEX 主軸的對齊方式 / justify-content

### 學習完 flex-direction，主軸的 flow 以後，來決定主軸的對齊:

- 在 .container 加入此語法:

.container {
    display: flex;
    flex-direction: row;
    justify-content: // 選擇你要的對齊方式。
}

### 明白語法如何使用之後，來了解有哪些對其方式吧:

- 這些都是可以被靈活運用的! **圖片 by 六角學院課程**

#### 以 flex-direction: row 為主軸進行下列對齊方式：


### flex-start:
- 此為預設效果，與 `flex-direction: row;` 一樣，default 效果。

.container {
    flex-direction: row;
    justify-content: flex-start;
    // 預設效果，根據主軸的流向起點排序。
}

### center / 使元件置中於容器內:

.container {
    flex-direction: row;
    justify-content: center; 
}


### flex-end / 使元件貼齊在主軸的終點:

.container {
    flex-direction: row;
    justify-content: flex-end;
}


### space-around / 左右皆有適當留白效果:

- 建議測試
space-around、space-between 等效果，消除 margin、padding 等效果。

.container {
    flex-direction: row;
    justify-content: space-around;
}


### space-between / 類似 around，但左右會貼齊在容器邊緣。

.container {
    flex-direction: row;
    justify-content: space-between;
}


### 調整容器高度，測試主軸為: column 瀏覽其變化。

---

### column / center

.container{
  height: 600px;
  flex-direction: column;
  justify-content: center;
}


### column / space-between

.container {
    flex-direction: column;
    justify-content: space-beetween;
}


### column / space-around

.container {
    flex-direction: column;
    justify-content: space-around;
}


#### [六角學院 FLEX 模擬器連結](https://codepen.io/peiqun/pen/WYzzYX)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / FLEX 篇`