前端福利！帮你搞定复杂网页布局的Flexbox相关工具

编者按：在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想制作一个复杂的多列布局，要做的众多浏览器的兼容一致那还是很复杂的。为了应对这种情况，CSS3包含了许多模块，使用不同的布局更加容易。现在我们将注意力转向CSS3的 Flexbox布局模块。

Flexbox 布局可能是CSS3中最值得期待也是最实用的功能之一。强大的Flexbox 不仅让平板和手机上的小规模布局更加轻松自如，它还足以应对各种类型的大型项目的复杂布局设计。

Flexbox 可以通过控制容器的各个属性（宽度高度等）来高效轻松地管理空间，这样一来，只需要适当地缩放子项目，防止控件溢出到区域外，从而保持结构的整洁。这种缩放方式与方向无关，这使得在移动端上看起来也非常舒服。

现在对于Flexbox 唯一的障碍大概就是浏览器兼容的问题，不过考虑到黑莓之前的操作系统Blackberry 10 和老旧的IE10都不存在对它的兼容性问题了，总体上而言，这个障碍也算不上太大的事情。

今天的文章搜集了20个基于Flexbox的解决方案，有的是代码片段，有的是框架，你可有根据你的需求选择合适的来使用。

Flex Box Editor

你可以在 Flex Box Editor 上测试你的Flexbox 布局，你可以轻松添加、删除、选取子元素，并控制它们的布局、方向、对齐方式和换行规则。

cssPlus

cssPlus 是一款标准的Web脚手架工具，它能够生成轻量级、健壮的、能同现代浏览器完美兼容的响应式布局。整个UI布局非常人性化，即使是新手也相当容易上手。

Bulma

Bulma 有着安全和灵活的特色，这使得它可以很好的在项目开发上帮到你。使用方法很简单：添加新的列，系统会帮你自动为不同的浏览器做好适配的。

它还配备了灵活的导航栏、多功能的媒体控件、可以轻松管控的内容、多种多样的类和各种基础的核心组件。

Flexbox Grid

Flexbox Grid 是一款轻量级但足够强健的栅格系统，它可以帮你精细地管控内容。这意味着你可以使用嵌套的栅格，并且能够针对列的尺寸、偏移、可视宽度、对齐和其他的属性进行响应式的调整。

Kube

Kube 是一个基于CSS的框架，用来快速搭建现代的、轻量级界面的工具。它能够制作清晰准确的排版布局，非常适合用来制作栅格系统，并且支持目前流行的桌面端和移动端浏览器。

Flexbox Responsive Grid Playground

Marco Lago 拿Flexbox 来做了一些响应式设计的测试，虽然结果看起来并不是特别理想，但是你可有将他的经验视作为一个可靠的起点。以此为基础来进行嵌套式栅格、间距可变的流态式分栏布局等等。

CSS Flexbox Grid

CSS Flexbox Grid 是在时下流行的卡片式布局的启发下的产物，这个模板包含了图库区、侧边栏导航和顶部导航栏，整体显得整洁而时尚。这种和谐的结构适用于众多不同的项目。

Flexbox Equal Height Columns

这种布局非常适合于图片展示、作品展示和博客类的网站，每个区块都可以用来承载图片、内容甚至更复杂的展现形式。其中的栅格系统足够灵活，可以匹配不同尺寸的屏幕。

Flexbox Cards

顾名思义，Flexbox Cards 是一个基于Flexbox 和卡片式设计的解决方案，它看起来干净而平衡。不同类型的信息被整齐地排列起来，并精心地被卡片承载起来，虽然看起来略简单。尽管如此，它确实使用而有效。

Feather Flex

Feather Flex 是一款简单、极简且极其轻量的、基于Flaxbox 的模板。它有着清晰的边界，合理而审慎的间距设定，虽然结构看起来略显乏味，但是它使用范畴相当广泛。

Flexbox Cards Layout + Fallback

这个代码片段同样实现了卡片式设计，充分调用了CSS罪行的特性，并且借助检测工具来解决浏览器兼容性问题。此外，在类的使用上还充分调用了BEM语法。

Flexbox Off Canvas Menu

Flexbox Off Canvas Menu 的设计是围绕着触摸屏设备来做的，隐藏的侧边栏收纳了几乎所有的选项，当用户点击汉堡菜单的时候，侧边栏会顺滑地展开。设计的样式并不算新颖，但是总体兼容性良好，紧凑且对移动端友好。

Navigation menus using CSS flexbox

这也是一个使用Flexbox来设计导航的项目。这个导航有着令人愉悦的外观，典型的线性结构和优化过的功能。

Flexbox grid layout w/ Mobile Menu

Lindsey 为大家分享的这个模板有着良好的组织性和现代的设计，高度一致的页头、精简的导航栏，大面积的展示图片、内容块和页脚。这个模板有很强的一致性。

Flexbox Grid

Flexbox Grid 是在Flex的基础上建立起来的，而整个栅格的设计则是基于Bootstrap 的规则，这样使得它可以针对不同的屏幕良好的响应，即使作为单独的模块来使用或者同Topcoat协同联动，也相当的不错。

A Better Responsive Image Gallery With Flexbox

仔细看这个图库的设计和其他的并没有什么差异，但是它其实经过有趣的调整，在大型的桌面显示器上，你很难发现这些有趣的属性。然而当你使用平板和手机开始浏览的时候，所有的项目都会按照栅格来布局，最后单独占一排的图片会被放大，宽度与整个布局相同，营造出顺滑而一致的体验。

Angular Resizable

Angular Resizable 是一个用来创造尺寸可调容器的解决方案，CSS 在其中起到了决定性的作用。

Flexibility

Flexibility 是一款在Flexbox布局模块基础上研发的增强型布局框架，这款工具旨在让老旧IE之类的浏览器也可以用上更优秀的布局。

Cyanotype

Cyanotype 是一款布局框架，它适用于SASS驱动下的界面，轻量级、快速和高效是它的特色。

Ginger

Ginger 是一款拥有12个分栏的响应式栅格系统，它是栅格系统中最极简的可行版本。

【技多不压身的设计师才有高薪资！】

1. 平面设计：《超赞！设计师完全自学指南》
2. 交互设计：《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计：《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发：《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧：《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案：《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南：《基础知识学起来！为设计师量身打造的DPI指南》
8. 交互设计自学路径图：《零基础入门！给非科班生的自学路径图之交互设计篇》

原文地址：designmodo
原文作者：Nataly Birch
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量112万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com