flex布局（3）: flex，inline-flex，inline-block 区别

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:

• the column-* properties in the Multi-column Layout module [CSS3COL] have no effect on a flex container.

• float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

• vertical-align has no effect on a flex item.

• the ::first-line and ::first-letter pseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.

If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column.

用于块状元素的属性对flex 容器不起做用

Flex 容器不是块级容器，所以一些专用于块状布局的属性，对Flex 布局不起做用。好比：

1. column-*  多栏布局里的column-*属性

2. float 和 clear 不能让弹性容器下的项目摆脱文档流，或清除浮动。

3.  vertical-align 垂直居中不起做用。（flex布局下，垂直居中更简单温馨：看我这里的一篇文章）

4. 伪类元素 ::first-line 和 ::first-letter 

flex This value causes an element to generate a block-level flex container box.

inline-flex This value causes an element to generate an inline-level flex container box.

 flex，inline-flex，inline-block 区别

flex： 将对象做为块级弹性伸缩盒显示。

inline-flex：将对象做为内联弹性伸缩盒显示。

inline-block: 将对象呈现为inline对象，可是对象的内容做为block对象呈现。

好比说，inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

那么，对于inline-block来讲，margin和padding的垂直方向的边距，则会产生边距效果。

Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: blockflex items, instead of being wrapped into a single anonymous table.

display的一些值，极可能在该容器触发建立匿名框机制。（匿名框有块级的，和内联的。）

若是是一个弹性容器的伸缩项目，它首先被块级化，所以不会建立匿名框。好比，两个相邻的伸缩项目，display值为 table-cell时，是两个独立的块级项目，而不会包裹成一个单独的匿名表格。