Flex-Layout

flex-layout

flex-layout基于24个栅格布局，与传统栅格化的使用方式类同，但提供了更直观、丰富的布局方式。

概述

与传统的栅格化一样，flex-layout基于[容器] (相当于Bootstrap的row) 和[栅格] (相当于Bootstrap的column) 来布局:

1. [容器]有两种：

   flex-column: 容器里的[栅格]以横向排列，与传统栅格化的row一样
   flex-row: 容器里的[栅格]以竖向排列，就像header、content、footer的排列一样

2. 通常，只有[栅格]可以直接放在[容器]中，而你的内容应该放在[栅格]里。但这不是必须的，直接把内容放在[容器]里也没问题。
3. 如果一个[容器]里包含的[栅格]超过24格，多出的部分将另起一行。
4. IE的话只兼容IE10+，其他主流浏览器都支持，具体可以看：兼容性
5. Flexbox有主轴，副轴的概念，flex-layout已经封装好了，你不需要懂得flexbox，也无需针对不同轴使用不同的class。
   不过，如果你对Flexbox有所了解的话，用起来会更顺手，推荐阮一峰的Flex 布局教程
6. 与Bootstrap等栅格化不同的是：flex-layout不需要container，栅格本身不自带padding。

优势

flex-layout解决了css布局的不少问题，这里所说的大多在下面的Example里可以看到:

1. 应用一个class就可以垂直居中。
2. 轻松实现多栏同高。
3. 自动计算间距，实现等宽布局，不需要再计算margin。
4. 支持自动填充剩余宽度，以往我们需要通过触发BFC来实现。
5. 支持自动填充剩余高度，比如将footer置于底部。
6. 随意调整[栅格]顺序，比如让main比sidebar提前渲染出来。
7. 丰富的对齐方式：上、下、左、右、左上、右上、左下、右下。

用法

响应式

flex-layout提供了基础的响应式功能，当分辨率小于某个阈值时，你可以指定：

1. [容器]从横向排列变为竖向排列，并且[栅格]宽度为100%
2. 隐藏指定[栅格]
3. 显示指定[栅格]

实例