块元素仅在弹性项目内？答案

【问题标题】：Block elements only inside flex item?块元素仅在弹性项目内？
【发布时间】：2021-05-03 18:20:48
【问题描述】：

显然，您只能在 flex 项目容器中包含块元素（内联、内联块、浮动无效）？这很奇怪，除非我做错了，否则似乎没有用？

.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;
}

您可能必须增加预览窗格的高度才能使弹性框正常工作。

为清楚起见进行了编辑：我不是在谈论弹性项目本身，而是在弹性项目内部的元素。在上面的 codepen 中，你会看到 h2 和 p 有边框，它们有 float 声明，但不浮动。

【问题讨论】：

标签： css flexbox

【解决方案1】：

您在section 和div 上都设置了display: flex。

如果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;
    ...
}

【讨论】：

【解决方案2】：

Flex 项目始终呈现为块，因为 flex 布局仅在类似块的布局中才有意义。弹性项目和块级盒子之间存在一些差异，这些差异在规范的 3 和 4 部分中进行了介绍，其中之一是弹性项目也不能浮动，因为这会破坏弹性布局（相反，外部浮动也不能侵入 flex 布局）。

您可以将不同的display 值应用于弹性项目（并用display: none 将它们完全隐藏），但这只会产生为 建立各种格式上下文的效果flex 项的子项，而不是项本身。

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

注意，为了建立一个弹性布局，你只需要在弹性容器上设置display: flex，而不是它的子容器。 flex 容器的所有不是display: none 的子项都将自动成为 flex 项。

【讨论】：

我不是在谈论弹性项目本身，而是弹性项目内部的元素。编辑了问题。
@Nimbuz：我明白你现在指的是什么了。嵌套弹性容器的使用会引起一些混乱，但它仍然是一样的。你有一个 flex 容器 .fill-height-or-more，在其中你有一些 div，它们本身是 both flex 项和 flex 容器，因为它们有自己的 display: flex 定义。然后，您尝试在这些 div 中浮动元素，这不起作用，因为这些元素被视为内部 flex 格式化上下文中的 flex 项。
那几乎是一个有很多弯曲的绕口令；）但我是从另一个答案中发布的示例中得到的。谢谢
@BoltClock，您写道：Flex 项目始终呈现为块...您是指块级元素吗？如果是这样，你能指出我规范中的相关部分吗？我一直找不到任何明确的东西。您的两个参考链接涵盖了块框和弹性项目之间的差异。调用弹性项目块似乎也有点令人困惑，因为它们默认显示为内联。如果您不介意，我正在寻找记录您的第一句话的内容，以 (1) 提高我的理解，以及 (2) 在此处提供答案：stackoverflow.com/a/33741262/3597276。谢谢。
@Michael_B：从第 3 节开始，“这与建立块格式化上下文相同，只是使用 flex 布局而不是块布局”——这意味着 flex 项之间存在细微差别（其中是flex-level，因为它们参与了一个flex FC）和块级盒子，但它们在很多方面都是相似的。

【解决方案3】：

为了在 flex 显示中显示内联元素，有另一个解决方案可以使用 display: inline-table，但它似乎也不支持浮动，但你可以通过用另一个 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;
}

【讨论】：

【解决方案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>

【讨论】：