意義
用來方便排版的屬性
參考資料
使用方法
- 對母元素 ,display: flex
- 對母元素,justify-content: center,子元素水平置中
- 對母元素,align-items: center,子元素垂直置中
- 子元素自動排列,不會掉出來
範例
.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
.inner1
.inner2
.inner3
.inner4
對比:使用display: inline-block對子元素定位
.inner1
.inner2
.inner3
.inner4