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时,是两个独立的块级项目,而不会包裹成一个单独的匿名表格。

原文地址:https://www.cnblogs.com/dodocie/p/7085315.html