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保留为flex-items。然后p和h1将浮动。

小提琴：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部分中介绍，其中一个是灵活项目也不能浮动，这也是因为这会破坏弹性布局（相反，外部漂浮物也不能侵入柔性布局）。

你可以将display的不同值应用于弹性项目（并将其与display: none一起隐藏），但这只会产生建立各种格式上下文的效果Flex项目的 children ，而不是项目本身。

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

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

Answer 3

用于替换flex内部的内联元素，有另一种解决方案可以使用display: inline-table但是它似乎不支持浮动，但你可以通过用anther div或其他东西包装它来实现这个目的

检查以下jsfiddle https://jsfiddle.net/reda84/eesuxLgu/

.row{
  width:100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > .col {
  display: flex;
  box-sizing: border-box;
  width:50%;
  float:left;
  flex-direction: column;
  border:1px solid #333;
  min-height:100px;
  padding:15px
}
.tag{
  background: #1b8fe7;
  color:#fff;
  padding:5px 10px;
  display: inline-table;
  margin:0px 5px 5px 0;
}

Answer 4

对于试图在 flex 容器内显示内联元素并找到此页面的人，您只需要将您的内容在 flex 元素中包装上一层。

示例：

不是

<label style="display:flex"> 
    A block label from a form <br>
    <i>This idiomatic element is a block box and not its inline default</span>
</label>

但是

<div style="display:flex">
    <label> 
          A block label from a form <br>
          <i>This idiomatic is an inline box and does not become a block</i>
    </label>
</div>

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

4 个答案: