在很多方面HTML和CSS是一個強大的內(nèi)容發(fā)布機制——易學、靈活和強大。但復雜的布局是他不擅長的。如果你想制作一個復雜的多列布局，要做的眾多瀏覽器的兼容一致那還是很復雜的。為了應對這種情況，CSS3包含了許多模塊，使用不同的布局更加容易?，F(xiàn)在我們將注意力轉(zhuǎn)向CSS3的 Flexbox 布局模塊。
Flexbox 布局可能是CSS3中最值得期待也是最實用的功能之一。強大的Flexbox 不僅讓平板和手機上的小規(guī)模布局更加輕松自如，它還足以應對各種類型的大型項目的復雜布局設計。
Flexbox 可以通過控制容器的各個屬性(寬度高度等)來高效輕松地管理空間，這樣一來，只需要適當?shù)乜s放子項目，防止控件溢出到區(qū)域外，從而保持結(jié)構(gòu)的整潔。這種縮放方式與方向無關，這使得在移動端上看起來也非常舒服。
現(xiàn)在對于Flexbox 唯一的障礙大概就是瀏覽器兼容的問題，不過考慮到黑莓之前的操作系統(tǒng)Blackberry 10 和老舊的IE10都不存在對它的兼容性問題了，總體上而言，這個障礙也算不上太大的事情。
今天的文章搜集了20個基于Flexbox的解決方案，有的是代碼片段，有的是框架，你可有根據(jù)你的需求選擇合適的來使用。
你可以在 Flex Box Editor 上測試你的Flexbox 布局，你可以輕松添加、刪除、選取子元素，并控制它們的布局、方向、對齊方式和換行規(guī)則。
cssPlus
cssPlus 是一款標準的Web腳手架工具，它能夠生成輕量級、健壯的、能同現(xiàn)代瀏覽器完美兼容的響應式布局 。整個UI布局非常人性化，即使是新手也相當容易上手。
Bulma
Bulma 有著安全和靈活的特色，這使得它可以很好的在項目開發(fā)上幫到你。使用方法很簡單：添加新的列，系統(tǒng)會幫你自動為不同的瀏覽器做好適配的。
它還配備了靈活的導航欄、多功能的媒體控件、可以輕松管控的內(nèi)容、多種多樣的類和各種基礎的核心組件。
Flexbox Grid
Flexbox Grid 是一款輕量級但足夠強健的柵格系統(tǒng)，它可以幫你精細地管控內(nèi)容。這意味著你可以使用嵌套的柵格，并且能夠針對列的尺寸、偏移、可視寬度、對齊和其他的屬性進行響應式的調(diào)整。
Kube
Kube 是一個基于CSS的框架，用來快速搭建現(xiàn)代的、輕量級界面的工具。它能夠制作清晰準確的排版布局 ，非常適合用來制作柵格系統(tǒng)，并且支持目前流行的桌面端和移動端瀏覽器。
Flexbox Responsive Grid Playground
Marco Lago 拿Flexbox 來做了一些響應式設計的測試，雖然結(jié)果看起來并不是特別理想，但是你可有將他的經(jīng)驗視作為一個可靠的起點。以此為基礎來進行嵌套式柵格、間距可變的流態(tài)式分欄布局等等。
CSS Flexbox Grid
CSS Flexbox Grid 是在時下流行的卡片式布局的啟發(fā)下的產(chǎn)物，這個模板包含了圖庫區(qū)、側(cè)邊欄導航和頂部導航欄，整體顯得整潔而時尚。這種和諧的結(jié)構(gòu)適用于眾多不同的項目。
Flexbox Equal Height Columns
這種布局非常適合于圖片展示、作品展示和博客類的網(wǎng)站，每個區(qū)塊都可以用來承載圖片、內(nèi)容甚至更復雜的展現(xiàn)形式。其中的柵格系統(tǒng)足夠靈活，可以匹配不同尺寸的屏幕。
Flexbox Cards
顧名思義，F(xiàn)lexbox Cards 是一個基于Flexbox 和卡片式設計的解決方案，它看起來干凈而平衡。不同類型的信息被整齊地排列起來，并精心地被卡片承載起來，雖然看起來略簡單。盡管如此，它確實使用而有效。