意義

用來方便排版的屬性
參考資料

使用方法

1. 對母元素 ，display: flex
2. 對母元素，justify-content: center，子元素水平置中
3. 對母元素，align-items: center，子元素垂直置中
4. 子元素自動排列，不會掉出來

範例

.outer
 .inner.inner1
 .inner.inner2
 .inner.inner3
 .inner.inner4

.outer
 width: 300px
 height: 200px
 border: 1px solid #000
 display: flex
 justify-content: center

.inner
 width: calc(100% / 4)
 height: 200px
 border: 1px solid #000

Display

對比：使用display: inline-block對子元素定位