Menu

Flexbox basic

flexbox
css
layout

Taker - Posted on 2018/12/17

 

flexbox 是比較新的 CSS 屬性,可以做到很多舊的 CSS 做不到、或很難做的排版

但 flexbox 比較難學一點,因為他是比較有架構的一套系統
你需要先瞭解這個系統,才會知道為什麼這樣做、會有那樣的結果

希望這個影片可以解決你對 flexbox 多年的疑惑 XD

 


 

相關連結與 Demo

 

MDN 提供的 flexbox 相關資訊

 

flex-grow

flex-shrink

flex-basis

flex

flex +wrap

flex order

flex +margin

flex vertical center

align-self

 

Playground

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

 

Practice

Product Grid

Grid

Grid +wrap

Grid (float)

Common Footer

Sticky Footer

 

More

https://flexbox.webflow.com/#examples

 

Can I Use?

https://caniuse.com/#search=flexbox