L6.Flexbox 伸缩盒模型
http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/
1 Introduction
CCS2.1中规定了四种布局模式：
- block layout, designed for laying out documents
- inline layout, designed for laying out text
- table layout, designed for laying out 2D data in a tabular format
- positioned layout, designed for very explicit positioning without much regard for other elements in the document
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，用于复杂的布局（designed for laying out more complex applications and webpages)
例子：
<style>
#deals {
display: flex; /* Flex layout so items have equal height */
flex-flow: row wrap; /* Allow items to wrap into multiple lines */
}
.sale-item {
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /* Lay out item’s contents vertically */
}
.sale-item > img {
order: -1; /* Shift image before other content (in visual order) */
align-self: center; /* Center the image cross-wise (horizontally) */
}
.sale-item > button {
margin-top: auto; /* Auto top margin pushes button to bottom */
}
</style>
2、Terminology 术语
Flexbox 由 伸缩容器 和 伸缩项目 组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。
下图是可以看出flex-flow与之前熟悉的元素的映射关系。The flex-flow value determines how these terms map to physical directions (top/right/bottom/left), axes (vertical/horizontal), and sizes (width/height).
Flexbox 定义了伸缩容器内伸缩项目该如何布局。
Flexbox 使用 主轴 和 侧轴的概念。伸缩行跟随主轴。侧轴则垂直于主轴。
- 主轴起点 Main Start
- 主轴终点 Main End
- 主轴方向 Main Direction (有时候也成为伸缩流方向 Flow Direction)
- 侧轴起点 Cross Start
- 侧轴终点 Cross End
- 侧轴方向 Cross Direction
3 Flex Containers: the flex and inline-flex display values
display 值有两种
flex ：生成一个块级伸缩容器box
inline-flex： 生成一个内联伸缩容器box
Flex 容器与之前的块级元素和内联元素不同，因此很多针对块级元素定义的属性在伸缩容器内是没效果的。（如column-*，float，clear等）
4 Flex Items
4.1 Absolutely-Positioned Flex Children
4.2 Flex Item Margins and Paddings
4.3 Flex Item Z-Ordering
4.4 Collapsed Items 项目折叠
设置伸缩元素的 visibility:collapse ，
目前为止，visibility: collapse; 还没有被让任何浏览器正确的实现。
4.5 Implied Minimum Size of Flex Items
5 Ordering and Orientation
伸缩容器的内容可以从任何方向任何顺序铺展。主要通过 flex-direction,flex-wrap, and order这三个属性
5.1 flex-direction 伸缩流的方向
- 默认值是 row：该值表示伸缩项目根据书写模式的方向布局(Flex Flow Direction)
- row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右，伸缩项目则是从右往左显示。
- column: 主轴和侧轴交换。如果书写模式是垂直的(从上到下)，那么伸缩项目也是垂直显示的(从上到下)。
- column-reverse: 和 column 一样，但是方向相反。
5.2 伸缩行换行: the flex-wrap property
nowrap | wrap | wrap-reverse
单行，多行，多行且从cross-end 往cross-start
如果 flex-wrap 设置为 wrap，在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。若为wrap-reverse，则从侧轴反方向添加
5.3 Flex Direction and Wrap: the
flex-flow shorthand
flex-direction 和flex-wrap 的缩写。
div1 { flex-flow: row; }
/* Initial value. Main-axis is
inline, no wrap. */
div2 { flex-flow: column wrap; }
/* Main-axis is block-direction (top to bottom)
and lines wrap in the inline direction (rightwards). */
div3 { flex-flow: row-reverse wrap-reverse; }
/* Main-axis is the opposite of inline direction
(right to left). New lines wrap upwards. */
NOTE: 以上三个属性都是相对writing-mode而言的。
5.4 显示顺序: order
如果需要文档顺序(html的顺序)和显示顺序不同时，用order，order默认值为0，设为-1将显示在最前面。
6 Flex Lines
- single-line 即使内容可能溢出也放在一行里
- multi-line 多行
7 Flexibility
7.1 The flex Shorthand
none | [ <‘flex-grow’><‘flex-shrink’>? || <‘flex-basis’> ]
flex: initial = flex: 0 1 auto.
元素在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。
元素会根据主轴自动伸缩以占用所有剩余空间，可以通过使用 flex: 1; 来达到一样的效果
在任何情况都不会发生伸缩。
flex: <positive-number> : 指定一个数字，代表了这个伸缩项目该占用的剩余空间比例。剩余空间被所有指定flex的伸缩元素瓜分。
7.3 Components of Flexibility
8 Alignment校准
块级元素中的margin在伸缩盒中，能做同样的事情，但是更加强大。
8.1 Aligning with auto margins
margin：auto垂直居中
#login {
margin-left: auto;
} 导致了所有的剩余空间被合并到login元素的左边去了
用auto margins 和alignment properties的区别：
- 左图：margin:auto 右图：（侧轴对齐align-self：center），当这个ul在页面的最左边时，左图是合理的布局。
8.2 Axis Alignment:
the justify-content property主轴对齐（水平方向）
flex-start | flex-end | center | space-between | space-around
8.3 Cross-axis Alignment:
the align-items and align-self properties侧轴对齐（竖直方向）
flex-start | flex-end | center | baseline | stretch
8.4 Packing Flex Lines: align-content 堆栈伸缩行
与 align-items 相似，不过不是对齐伸缩项目，它对齐的是伸缩行
flex-start | flex-end | center | space-between | space-around | stretch
8.5 Flex Baselines
main-axis baseline
cross-axis baseline
