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

编者按：在很多方面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】