CSS Flexible Box Layout: Advanced layouts with flexbox (Flexible Box Layout) - CSS 中文开发手册
Flexbox的定义是能够更改其项目，宽度和/或高度以最好地填充任何显示设备上的可用空间。柔性容器扩展其项目以填充可用空间或缩小它们以防止溢出。
浮动布局带来的问题
包含困难-如果我们的网站有一些不可预测的内容，那么它就变得很有挑战性，同时也变得单调乏味。源序依赖-布局依赖于HTML源，因此很难更改布局响应不同站点。等高列问题-如果我们有2-3列的内容不同，我们需要它们的高度相同，不管内容如何，那就很困难了。内容对中-要使div的内容在中心垂直和水平地对齐，使用浮标非常麻烦
flexbox是如何解决这些问题的？
使flex项目增长以填充可用空间或缩小以避免溢出。这样就解决了新内容溢出的问题，也使版面符合前者的期望。它给出了成比例的尺寸。FLEX容器中的FLEX项可以在任意方向布局，因此这解决了我们在不同媒体查询中的内容顺序问题。它使视觉内容顺序独立于HTML标记顺序，从而帮助站点响应主题。
Flexbox特性
主轴，主尺寸-挠性容器的主轴是放置挠性物品的主要轴。它在主维度上扩展。主-开始，主-结束-将挠性物品放置在容器内，从主开始侧开始，向主端一侧移动。主尺寸，主尺寸特性-弯曲物品的阔度或高度，以主尺寸为准，是该物品的主要尺寸。FlexItem的主尺寸属性是宽度或高度属性，以主维度中的哪个属性为准。横轴，横切尺寸与主轴垂直的轴称为交叉轴。它在横截面上延伸。交叉启动，交叉-Flex线上装满物品，并将其放入容器中，从弯曲容器的交叉开始侧开始，然后向交叉端一侧移动。交叉尺寸，交叉尺寸特性-弯曲物品的阔度或高度，以横截面尺寸为准。交叉大小属性是横截面维度中的宽度或高度。
Flex容器属性
flex-directionflex-wrapflex-flow
justify-content
align-itemsalign-content
Flex项属性
orderalign-selfflex-growflex-shrinkflex-basis
Flexbox Mixins
对于那些想利用当前浏览器的本地支持来解决 flexbox 的人来说, 这是一组 mixin。完整支持表
核对：http：//caniuse.com/Flexbox
这将使用：
使用2009'box'语法(FF 和 旧Wekbit)和前缀语法( IE10 ,WebKit浏览器，没有flex包装)
最终标准语法(FF、Safari、Chrome、IE11、Opera)
这项工作的灵感来自：
http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
http：//w3.org/tr/CSS 3-Flexbox/http://the-echoplex.net/flexyboxes/
http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx(http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85%29.aspx)
http：//css-tics.com/use-Flexbox/http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
注意： Mixin目前在浏览器中本地不支持。相反，您将需要使用CSS预处理器来充分利用以下内容。但是，CSS预处理器只是生成有效的CSS，所以下面使用的技术可以用纯CSS代替，如果优选的话。
Flexbox容器
“flex”值会导致元素生成块级Flex容器框。
“inline-flex”值会导致元素生成内联级Flex容器框。
显示：flex | inline-flex http://w3.org/tr/css3-flexbox/#flex-containers
@mixin flexbox {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
//Using this mixin
%flexbox { @include flexbox; }
@mixin inline-flex {
display: -webkit-inline-box;
display: -moz-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
%inline-flex { @include inline-flex; }
Flexbox方向
'flex-direction'属性通过设置flex容器主轴的方向来指定Flex容器的放置方式。这决定了flex项目的布局方向。
值：row | row-reverse | column | column-reverse http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-box-direction: reverse;
-moz-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-moz-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-box-direction: reverse;
-moz-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-direction: normal;
-moz-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($args...) { @include flex-direction($args...); }
Flexbox包装
“柔性包装”属性控制柔性容器是单线还是多线，以及横轴的方向决定了新线的堆叠方向。
Values: nowrap | wrap | wrap-reverse 默认：无包装