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: 0 auto

flex: initial = flex: 0 1 auto. 

元素在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。

flex: auto =flex: 1 1 auto.

元素会根据主轴自动伸缩以占用所有剩余空间，可以通过使用 flex: 1; 来达到一样的效果

flex: none=flex: 1 1 auto.

在任何情况都不会发生伸缩。

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

9 Flex Layout Algorithm