現在越來越多人在 CSS 排版使用 Flexbox，Flex 的參數非常多，於是就有模擬工具開發出來，可以左邊點點，右邊即時看結果，可以幫助理解 Flexbox 的參數
CSS Flexbox (Flex) 模擬器
CSS 的 Flexbox 參數還不少，下述為 MDN 的官方文件說明：
- CSS彈性盒子用法 - CSS | MDN
- Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
- CSS Flexbox (Flexible Box)
看官方文件有些參數還是不容易理解，所以此篇就有清楚的圖文說明：A Complete Guide to Flexbox | CSS-Tricks
由此圖文說明外，有作者做出模擬器，可以方便即時點，觀看畫面結果：CSS Flexbox Simulator
下述文章有 Flex 的圖文說明，在加上 CodePen 的範例，可以自行修改測試結果~
- Flex 外容器屬性：(Container)
- display (flex | inline-flex)
- flex-flow (flex-direction || flex-wrap，直接帶入下述的值，例如：row nowrap)
- flex-direction (row | row-reverse | column | column-reverse 軸線 水平、水平反轉、垂直、垂直反轉)
- flex-wrap (wrap | nowrap | wrap-reverse 換行、不換行、換行時反轉)
- justify-content (flex-start | flex-end | center | space-between | space-around 水平對齊)
- align-items (flex-start | flex-end | center | baseline | stretch 垂直對齊)
- Flex 內元件屬性：(Items)
- flex (flex-grow || flex-shrink || flex-basis，單純設定一個是 flex-grow)
- flex-grow (default:0，元件伸展值，0不會縮放，ex: 2)
- flex-shrink (default:0，元件縮放性，元件的伸展性，ex: 1)
- flex-basis (元件的基準值，可使用不同單位，ex: 0%)
- order (重新定義元件的排列順序，順序會依據數值的大小排列，ex: -1)
- align-self (auto | flex-start | flex-end | center | baseline | stretch，內元件交錯軸的對齊設定，設定單一元件值)
- flex (flex-grow || flex-shrink || flex-basis，單純設定一個是 flex-grow)
相關網頁
