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時，是兩個獨立的塊級項目，而不會包裹成一個單獨的匿名錶格。