仅在弹性项目内阻止元素？

Question

显然,你只能在flex项容器中包含块元素(内联,内联块,浮动无效)？这很奇怪,除非我完全错了,否则看起来没什么用处？

这是笔:http://codepen.io/iaezzy/pen/GggVxe

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

您可能必须增加预览窗格高度才能使Flexbox正常工作.

为清晰起见编辑:我不是在谈论弹性项目本身,而是在弹性项目中的元素.在上面的codepen中,你会看到h2并有p边框,他们有float声明,但不要浮动.

Answer 1

你既设置display: flex了section,也设置了div.

如果section作为一个容器,你给display: flex的section,离开div的柔性物品.然后ps和h1s将浮动.

小提琴:http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more {
    display: flex;
    flex-direction: column;
    ...
}
.fill-height-or-more > div {
    flex: 1;
    ...
}
.some-area > div p {
    width: 40%;
    float: left;
    ...
}

Answer 2

Flex项目始终呈现为块,因为flex布局仅在块状布局中有意义.在规范的第3节和第4节中介绍的flex项和块级框之间存在一些差异,一个是flex项也不能浮动,再次因为这会破坏flex布局(相反,外部浮动也不会侵入弹性布局).

您可以display对flex项目应用不同的值(并将它们一起隐藏display: none),但这只会为flex项目的子项而不是项目本身建立各种格式化上下文.

这包括display: flex,正如你所展示的那样; 然后会发生的是,flex项目成为自己子项的flex容器,这使得这些子项在嵌套的flex格式化上下文中展示项目.因此,漂浮那些孩子是行不通的.

请注意,为了建立flex布局,您只需要display: flex在flex容器上设置,而不是在子容器上设置.Flex容器的所有子容器都不会display: none自动成为弹性项目.