CSS Flexbox 介紹與解析

Flex 版面實例介紹

版面垂直置中

幾千萬年以來傷透腦筋的垂直置中,超級適合用flex解的喔!在這邊我們會用到兩個屬性:

  • justify-content
  • align-items

而這兩個屬性我前面通通都、沒、說(炸),但真的很簡單,所以直接上程式碼啦!

.flex-container {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

範例請參考 codepen:

See the Pen Flexbox DemoIII by MUKi (@mukiwu) on CodePen.

動態三欄式

除了用flex-grow動態調整他們的大小外,還用了order調整版面的順序

See the Pen Flexbox 3 column dynamic by MUKi (@mukiwu) on CodePen.

不同的圖片 / 區塊排列

這種排版變化比較多一點,但不知道怎麼稱呼它,所以直接看範例比較清楚 XDDD。

See the Pen Flexbox demo by MUKi (@mukiwu) on CodePen.

一樣是大量運用到flex屬性做調整,在這個例子中,flex-basis尤其為最重要,當然還有一些對齊的語法也不能少。以下是有用到的語法:

  • flex-wrap
  • flex-basis
  • justify-content

以上三種排版,是我目前想到可能比較有趣,或是比較實際的例子 XD,如果有特別想要了解某些版面換成flex該怎麼寫的話,也可以留言給我唷!