CSS flex

意義

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

使用方法

  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

.inner1
.inner2
.inner3
.inner4

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

.inner1
.inner2
.inner3
.inner4

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *