CSS Flexbox (Flex) 模擬器

現在越來越多人在 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 的範例，可以自行修改測試結果~

文章：圖解：CSS Flex 屬性一點也不難

• 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 空間計算規則
• Playing with CSS Grid - DEV