---
# System prepended metadata

title: justify-content 決定對齊的方式
tags: [css]

---

---
tags: css
---

# justify-content 決定對齊的方式

* 對齊會以flex-direction軸線方式去做對齊，如果軸線是上下那就會以上下方式去做內容對齊。
* justify-content 也是寫在最外層的div中。
```css=
.container{
  width: 500px;
  background:#456;
  margin: 0 auto;
  display: flex;
  flex-direction: column; 
  justify-content: center;
}
```

* justify-content 內容也會對父元素去做貼齊。
![](https://i.imgur.com/aaTDDit.png)

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

* 六角flex模尼器:https://codepen.io/peiqun/pen/WYzzYX
