CSS Flexbox (Flex) 模擬器

現在越來越多人在 CSS 排版使用 Flexbox,Flex 的參數非常多,於是就有模擬工具開發出來,可以左邊點點,右邊即時看結果,可以幫助理解 Flexbox 的參數

CSS Flexbox (Flex) 模擬器

CSS 的 Flexbox 參數還不少,下述為 MDN 的官方文件說明:

看官方文件有些參數還是不容易理解,所以此篇就有清楚的圖文說明: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,內元件交錯軸的對齊設定,設定單一元件值)

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料