《Disney +》 迪士尼、Marvel、彼思、星球大戰…  有機會免費得到PS5!?PS5 × ZONe限定聯名罐日本發售!   《DAYS GONE》PC版5月18日上市,實機遊玩影片搶先看   插上USB就能輕鬆提升音質!Razer推出便攜式 DAC 耳機擴大器「THX Onyx」!   《原神》2.3版本更新:在龍脊雪山來場冬令營!   勇者鬥惡龍主題樂園「DRAGON QUEST ISLAND 大魔王索瑪與起始之島」開幕日確定!   「寶可夢 晶燦鑽石・明亮珍珠」FINAL PV & 新情報公開!   【開箱】買了Transcend的NAS StoreJet Cloud 210N!   東京都內的遊戲酒店! 東京台場日航大酒店推出遊戲專用房! 

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

隨機商業新聞

NordVPN