在很多方面HTML和CSS是一個(gè)強(qiáng)大的內(nèi)容發(fā)布機(jī)制——易學(xué)、靈活和強(qiáng)大。但復(fù)雜的布局是他不擅長(zhǎng)的。如果你想制作一個(gè)復(fù)雜的多列布局，要做的眾多瀏覽器的兼容一致那還是很復(fù)雜的。為了應(yīng)對(duì)這種情況，CSS3包含了許多模塊，使用不同的布局更加容易。現(xiàn)在我們將注意力轉(zhuǎn)向CSS3的 Flexbox 布局模塊。

　　Flexbox 布局可能是CSS3中最值得期待也是最實(shí)用的功能之一。強(qiáng)大的Flexbox 不僅讓平板和手機(jī)上的小規(guī)模布局更加輕松自如，它還足以應(yīng)對(duì)各種類型的大型項(xiàng)目的復(fù)雜布局設(shè)計(jì)。

　　Flexbox 可以通過(guò)控制容器的各個(gè)屬性(寬度高度等)來(lái)高效輕松地管理空間，這樣一來(lái)，只需要適當(dāng)?shù)乜s放子項(xiàng)目，防止控件溢出到區(qū)域外，從而保持結(jié)構(gòu)的整潔。這種縮放方式與方向無(wú)關(guān)，這使得在移動(dòng)端上看起來(lái)也非常舒服。

　　現(xiàn)在對(duì)于Flexbox 唯一的障礙大概就是瀏覽器兼容的問(wèn)題，不過(guò)考慮到黑莓之前的操作系統(tǒng)Blackberry 10 和老舊的IE10都不存在對(duì)它的兼容性問(wèn)題了，總體上而言，這個(gè)障礙也算不上太大的事情。

　　今天的文章搜集了20個(gè)基于Flexbox的解決方案，有的是代碼片段，有的是框架，你可有根據(jù)你的需求選擇合適的來(lái)使用。

　　Flex Box Editor

　　你可以在 Flex Box Editor 上測(cè)試你的Flexbox 布局，你可以輕松添加、刪除、選取子元素，并控制它們的布局、方向、對(duì)齊方式和換行規(guī)則。

　　cssPlus

　　cssPlus 是一款標(biāo)準(zhǔn)的Web腳手架工具，它能夠生成輕量級(jí)、健壯的、能同現(xiàn)代瀏覽器完美兼容的響應(yīng)式布局 。整個(gè)UI布局非常人性化，即使是新手也相當(dāng)容易上手。

　　Bulma

　　Bulma 有著安全和靈活的特色，這使得它可以很好的在項(xiàng)目開(kāi)發(fā)上幫到你。使用方法很簡(jiǎn)單：添加新的列，系統(tǒng)會(huì)幫你自動(dòng)為不同的瀏覽器做好適配的。

　　它還配備了靈活的導(dǎo)航欄、多功能的媒體控件、可以輕松管控的內(nèi)容、多種多樣的類和各種基礎(chǔ)的核心組件。

　　Flexbox Grid

　　Flexbox Grid 是一款輕量級(jí)但足夠強(qiáng)健的柵格系統(tǒng)，它可以幫你精細(xì)地管控內(nèi)容。這意味著你可以使用嵌套的柵格，并且能夠針對(duì)列的尺寸、偏移、可視寬度、對(duì)齊和其他的屬性進(jìn)行響應(yīng)式的調(diào)整。

　　Kube

　　Kube 是一個(gè)基于CSS的框架，用來(lái)快速搭建現(xiàn)代的、輕量級(jí)界面的工具。它能夠制作清晰準(zhǔn)確的排版布局 ，非常適合用來(lái)制作柵格系統(tǒng)，并且支持目前流行的桌面端和移動(dòng)端瀏覽器。

　　Flexbox Responsive Grid Playground

　　Marco Lago 拿Flexbox 來(lái)做了一些響應(yīng)式設(shè)計(jì)的測(cè)試，雖然結(jié)果看起來(lái)并不是特別理想，但是你可有將他的經(jīng)驗(yàn)視作為一個(gè)可靠的起點(diǎn)。以此為基礎(chǔ)來(lái)進(jìn)行嵌套式柵格、間距可變的流態(tài)式分欄布局等等。

　　CSS Flexbox Grid

　　CSS Flexbox Grid 是在時(shí)下流行的卡片式布局的啟發(fā)下的產(chǎn)物，這個(gè)模板包含了圖庫(kù)區(qū)、側(cè)邊欄導(dǎo)航和頂部導(dǎo)航欄，整體顯得整潔而時(shí)尚。這種和諧的結(jié)構(gòu)適用于眾多不同的項(xiàng)目。

　　Flexbox Equal Height Columns

　　這種布局非常適合于圖片展示、作品展示和博客類的網(wǎng)站，每個(gè)區(qū)塊都可以用來(lái)承載圖片、內(nèi)容甚至更復(fù)雜的展現(xiàn)形式。其中的柵格系統(tǒng)足夠靈活，可以匹配不同尺寸的屏幕。

　　Flexbox Cards

　　顧名思義，F(xiàn)lexbox Cards 是一個(gè)基于Flexbox 和卡片式設(shè)計(jì)的解決方案，它看起來(lái)干凈而平衡。不同類型的信息被整齊地排列起來(lái)，并精心地被卡片承載起來(lái)，雖然看起來(lái)略簡(jiǎn)單。盡管如此，它確實(shí)使用而有效。

　　Feather Flex

　　Feather Flex 是一款簡(jiǎn)單、極簡(jiǎn)且極其輕量的、基于Flaxbox 的模板。它有著清晰的邊界，合理而審慎的間距設(shè)定，雖然結(jié)構(gòu)看起來(lái)略顯乏味，但是它使用范疇相當(dāng)廣泛。

　　Flexbox Cards Layout + Fallback

　　這個(gè)代碼片段同樣實(shí)現(xiàn)了卡片式設(shè)計(jì)，充分調(diào)用了CSS罪行的特性，并且借助檢測(cè)工具來(lái)解決瀏覽器兼容性問(wèn)題。此外，在類的使用上還充分調(diào)用了BEM語(yǔ)法。

　　Flexbox Off Canvas Menu

　　Flexbox Off Canvas Menu 的設(shè)計(jì)是圍繞著觸摸屏設(shè)備來(lái)做的，隱藏的側(cè)邊欄收納了幾乎所有的選項(xiàng)，當(dāng)用戶點(diǎn)擊漢堡菜單的時(shí)候，側(cè)邊欄會(huì)順滑地展開(kāi)。設(shè)計(jì)的樣式并不算新穎，但是總體兼容性良好，緊湊且對(duì)移動(dòng)端友好。

　　Navigation menus using CSS flexbox

　　這也是一個(gè)使用Flexbox來(lái)設(shè)計(jì)導(dǎo)航的項(xiàng)目。這個(gè)導(dǎo)航有著令人愉悅的外觀，典型的線性結(jié)構(gòu)和優(yōu)化過(guò)的功能。

　　Flexbox grid layout w/ Mobile Menu

　　Lindsey 為大家分享的這個(gè)模板有著良好的組織性和現(xiàn)代的設(shè)計(jì)，高度一致的頁(yè)頭、精簡(jiǎn)的導(dǎo)航欄，大面積的展示圖片、內(nèi)容塊和頁(yè)腳。這個(gè)模板有很強(qiáng)的一致性。

　　Flexbox Grid

　　Flexbox Grid 是在Flex的基礎(chǔ)上建立起來(lái)的，而整個(gè)柵格的設(shè)計(jì)則是基于Bootstrap 的規(guī)則，這樣使得它可以針對(duì)不同的屏幕良好的響應(yīng)，即使作為單獨(dú)的模塊來(lái)使用或者同Topcoat協(xié)同聯(lián)動(dòng)，也相當(dāng)?shù)牟诲e(cuò)。

　　A Better Responsive Image Gallery With Flexbox

　　仔細(xì)看這個(gè)圖庫(kù)的設(shè)計(jì)和其他的并沒(méi)有什么差異，但是它其實(shí)經(jīng)過(guò)有趣的調(diào)整，在大型的桌面顯示器上，你很難發(fā)現(xiàn)這些有趣的屬性。然而當(dāng)你使用平板和手機(jī)開(kāi)始瀏覽的時(shí)候，所有的項(xiàng)目都會(huì)按照柵格來(lái)布局，最后單獨(dú)占一排的圖片會(huì)被放大，寬度與整個(gè)布局相同，營(yíng)造出順滑而一致的體驗(yàn)。

　　Angular Resizable

　　Angular Resizable 是一個(gè)用來(lái)創(chuàng)造尺寸可調(diào)容器的解決方案，CSS 在其中起到了決定性的作用。

　　Flexibility

　　Flexibility 是一款在Flexbox布局模塊基礎(chǔ)上研發(fā)的增強(qiáng)型布局框架，這款工具旨在讓老舊IE之類的瀏覽器也可以用上更優(yōu)秀的布局。

　　Cyanotype

　　Cyanotype 是一款布局框架，它適用于SASS驅(qū)動(dòng)下的界面，輕量級(jí)、快速和高效是它的特色。

　　Ginger

　　Ginger 是一款擁有12個(gè)分欄的響應(yīng)式柵格系統(tǒng)，它是柵格系統(tǒng)中最極簡(jiǎn)的可行版本。