幫你搞定複雜網頁布局的Flexbox相關工具

發(fā)布日期：2016-05-09

來源：admin

浏覽量：4937

字體：【大中小】

在很多方面(miàn)HTML和CSS是一個強大的内容發(fā)布機制——易學(xué)、靈活和強大。但複雜的布局是他不擅長(cháng)的。如果你想制作一個複雜的多列布局，要做的衆多浏覽器的兼容一緻那還(hái)是很複雜的。爲了應對(duì)這(zhè)種(zhǒng)情況，CSS3包含了許多模塊，使用不同的布局更加容易。現在我們將(jiāng)注意力轉向(xiàng)CSS3的 Flexbox布局模塊。

Flexbox 布局可能(néng)是CSS3中最值得期待也是最實用的功能(néng)之一。強大的Flexbox 不僅讓平闆和手機上的小規模布局更加輕松自如，它還(hái)足以應對(duì)各種(zhǒng)類型的大型項目的複雜布局設計。

天貓&京東,内蒙古電商品牌策劃,内蒙古微信營銷,内蒙古微網站,呼和浩特電商品牌策劃,呼和浩特微信營銷,呼和浩特微網站,内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

Flexbox 可以通過(guò)控制容器的各個屬性（寬度高度等）來高效輕松地管理空間，這(zhè)樣(yàng)一來，隻需要适當地縮放子項目，防止控件溢出到區域外，從而保持結構的整潔。這(zhè)種(zhǒng)縮放方式與方向(xiàng)無關，這(zhè)使得在移動端上看起(qǐ)來也非常舒服。

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

今天的文章搜集了20個基于Flexbox的解決方案，有的是代碼片段，有的是框架，你可有根據你的需求選擇合适的來使用。

Flex Box Editor

1-Flex-Box-Editor

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

cssPlus

2-cssPlus

cssPlus 是一款标準的Web腳手架工具，它能(néng)夠生成(chéng)輕量級、健壯的、能(néng)同現代浏覽器完美兼容的響應式布局。整個UI布局非常人性化，即使是新手也相當容易上手。

Bulma

3-Bulma

Bulma 有著(zhe)安全和靈活的特色，這(zhè)使得它可以很好(hǎo)的在項目開(kāi)發(fā)上幫到你。使用方法很簡單：添加新的列，系統會幫你自動爲不同的浏覽器做好(hǎo)适配的。

它還(hái)配備了靈活的導航欄、多功能(néng)的媒體控件、可以輕松管控的内容、多種(zhǒng)多樣(yàng)的類和各種(zhǒng)基礎的核心組件。

Flexbox Grid

4-Flexbox-Grid

Flexbox Grid 是一款輕量級但足夠強健的栅格系統，它可以幫你精細地管控内容。這(zhè)意味著(zhe)你可以使用嵌套的栅格，并且能(néng)夠針對(duì)列的尺寸、偏移、可視寬度、對(duì)齊和其他的屬性進(jìn)行響應式的調整。

Kube

5-Kube

Kube 是一個基于CSS的框架，用來快速搭建現代的、輕量級界面(miàn)的工具。它能(néng)夠制作清晰準确的排版布局，非常适合用來制作栅格系統，并且支持目前流行的桌面(miàn)端和移動端浏覽器。

Flexbox Responsive Grid Playground

6-Flexbox-Responsive-Grid-Playground-by-Marco-Lago

Marco Lago 拿Flexbox 來做了一些響應式設計的測試，雖然結果看起(qǐ)來并不是特别理想，但是你可有將(jiāng)他的經(jīng)驗視作爲一個可靠的起(qǐ)點。以此爲基礎來進(jìn)行嵌套式栅格、間距可變的流态式分欄布局等等。

CSS Flexbox Grid

7-CSS-Flexbox-Grid-by-Roman-Milkovic

CSS Flexbox Grid 是在時下流行的卡片式布局的啓發(fā)下的産物，這(zhè)個模闆包含了圖庫區、側邊欄導航和頂部導航欄，整體顯得整潔而時尚。這(zhè)種(zhǒng)和諧的結構适用于衆多不同的項目。

Flexbox Equal Height Columns

8-News-?-Flexbox-Equal-Height-Columns

這(zhè)種(zhǒng)布局非常适合于圖片展示、作品展示和博客類的網站，每個區塊都(dōu)可以用來承載圖片、内容甚至更複雜的展現形式。其中的栅格系統足夠靈活，可以匹配不同尺寸的屏幕。

Flexbox Cards

9-Flexbox-Cards-by-Lindsey

顧名思義，Flexbox Cards 是一個基于Flexbox 和卡片式設計的解決方案，它看起(qǐ)來幹淨而平衡。不同類型的信息被(bèi)整齊地排列起(qǐ)來，并精心地被(bèi)卡片承載起(qǐ)來，雖然看起(qǐ)來略簡單。盡管如此，它确實使用而有效。

Feather Flex

10-Feather-Flex

Feather Flex 是一款簡單、極簡且極其輕量的、基于Flaxbox 的模闆。它有著(zhe)清晰的邊界，合理而審慎的間距設定，雖然結構看起(qǐ)來略顯乏味，但是它使用範疇相當廣泛。

Flexbox Cards Layout + Fallback

11-Flexbox-Cards-Layout-Fallback-by-Luca-Rosaldi

這(zhè)個代碼片段同樣(yàng)實現了卡片式設計，充分調用了CSS罪行的特性，并且借助檢測工具來解決浏覽器兼容性問題。此外，在類的使用上還(hái)充分調用了BEM語法。

Flexbox Off Canvas Menu

12-Flexbox-Off-Canvas-Menu

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

Navigation menus using CSS flexbox

13-Navigation-menus-using-CSS-flexbox

這(zhè)也是一個使用Flexbox來設計導航的項目。這(zhè)個導航有著(zhe)令人愉悅的外觀，典型的線性結構和優化過(guò)的功能(néng)。

Flexbox grid layout w/ Mobile Menu

14-Flexbox-grid

Lindsey 爲大家分享的這(zhè)個模闆有著(zhe)良好(hǎo)的組織性和現代的設計，高度一緻的頁頭、精簡的導航欄，大面(miàn)積的展示圖片、内容塊和頁腳。這(zhè)個模闆有很強的一緻性。

Flexbox Grid

15-Flexbox-Grid

Flexbox Grid 是在Flex的基礎上建立起(qǐ)來的，而整個栅格的設計則是基于Bootstrap 的規則，這(zhè)樣(yàng)使得它可以針對(duì)不同的屏幕良好(hǎo)的響應，即使作爲單獨的模塊來使用或者同Topcoat協同聯動，也相當的不錯。

A Better Responsive Image Gallery With Flexbox

16-A-Better-Responsive-Image-Gallery

仔細看這(zhè)個圖庫的設計和其他的并沒(méi)有什麼(me)差異，但是它其實經(jīng)過(guò)有趣的調整，在大型的桌面(miàn)顯示器上，你很難發(fā)現這(zhè)些有趣的屬性。然而當你使用平闆和手機開(kāi)始浏覽的時候，所有的項目都(dōu)會按照栅格來布局，最後(hòu)單獨占一排的圖片會被(bèi)放大，寬度與整個布局相同，營造出順滑而一緻的體驗。

Angular Resizable

17-Angular-Resizable-by-Jacob-Davidson

Angular Resizable 是一個用來創造尺寸可調容器的解決方案，CSS 在其中起(qǐ)到了決定性的作用。

Flexibility

18-Flexibility

Flexibility 是一款在Flexbox布局模塊基礎上研發(fā)的增強型布局框架，這(zhè)款工具旨在讓老舊IE之類的浏覽器也可以用上更優秀的布局。

Cyanotype

19-Cyanotype

Cyanotype 是一款布局框架，它适用于SASS驅動下的界面(miàn)，輕量級、快速和高效是它的特色。

Ginger

20-Ginger

Ginger 是一款擁有12個分欄的響應式栅格系統，它是栅格系統中最極簡的可行版本。