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