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:

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM