使 flex 容器的子项不是 flex 项

Question

我认为这完全违背了 display: flex 属性的工作方式，但我想知道这是否可能，或者是否有破解方法。

是否可以让 flex 容器的子项不作为 flex 项？示例：

http://jsbin.com/jusehedumi/edit?html,css,output

有没有什么方法可以让孩子 3 表现得像一个正常的显示块？由于父 flex 容器的 justicity-content: center 而没有它自动对齐？

纯粹的 CSS 解决方案会很棒。考虑一下，添加一些额外的 HTML 可能会使这个问题更容易修复/解决。

.flex{
  display: flex;
  justify-content: center;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
  display: block;
}

  Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

编辑：我知道可以使用position: absolute 或类似方法将孩子从弹性容器中取出。我正在寻找的是一种让其中一个孩子表现为block 元素（或inline）同时保持弹性容器的孩子的方法。

Answer 1

根据问题编辑更新

不，没有可以设置的属性来使 flex 容器子项不再是 flex 项。

但可以做的是，不要在其中使用任何 flex 属性，从而使其表现为块或内联块元素。

例如，结合flex-wrap: wrap 启用项目来换行，给第三个项目flex: none 将使它表现为一个内联块，给它width: 100% 它将表现为一个块（如下所示）。

当涉及到弹性容器属性时，有些可以在项目上被覆盖，比如align-items / align-self，有些不能，比如justify-content。

为了在您给定的代码示例中模仿justify-content，可以使用自动边距，再加上使用order 属性和伪元素的技巧，可以使第三个表现得像一个内联块：

.flex{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.one{
  margin-left: auto;
}
.child.two{
  margin-right: auto;
}

.flex::after{
  content: '';
  width: 100%;
  order: 1;
}
.child.three{
  background: blue;
  order: 2;
}

Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

---

作为说明，这里有一个很好的答案来描述弹性项目的显示类型：

• What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

---

初步回答

是否可以让 flex 容器的子项不作为 flex 项？

没有很好的跨浏览器解决方案来使 flex 容器子 not 表现为 flex 项。

可以使用绝对定位，虽然它会使元素脱离流动，但在内容流动方面它不会像块元素那样表现。

有什么方法可以让三岁的孩子表现得像个正常人 显示块？

基于一个普通的块元素占用自己的一行，填充其父元素的宽度，您可以通过将flex-wrap: wrap 添加到容器并将第三项的宽度设置为 100%，使其行为类似于一个。

请注意，我还添加了align-content: flex-start;，因此项目不会沿父级的高度拉伸/展开，而是在其顶部对齐。

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
  width: 100%;
}

Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

---

如果您希望第三项与前两项保持相同的宽度，包装器可以帮助您。

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
}

.wrapper{
  width: 100%;
}

Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="wrapper">
      <div class="child three"></div>
    </div>
  </div>

---

如果无法使用包装器，您可以使用右边距，但由于基于百分比的边距可能在不同的浏览器上呈现不同，您需要正确测试它，或使用其他单位，例如视口单位，例如 vw。

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
  margin-right: calc(100% - 120px);
}

Is there any way to make child three not behave as a flex child?
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

---

如果以上两种解决方案都不是一个选项，则可以使用块元素和内联块元素来实现相同的布局。

.flex{
  /*  removed the Flexbox properties
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  */
  text-align: center;               /* added  */
  width: 400px;
  height: 400px;
  background: #ccc;
}

.child{
  display: inline-block;            /*  added  */
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.child.three{
  background: blue;
  display: block;
}

<strike>Is there any way to make child three not behave as a flex child?</strike>
  <div class="flex">
    <div class="child one"></div>
    <div class="child two"></div>
    <div class="child three"></div>
  </div>

Answer 2

只有 flex 容器的 in-flow 子元素 才是 flex 项。

因此，绝对定位的子元素或 flex 容器的子元素之外的后代元素不是 flex 项并忽略 flex 属性。

更多详情请看我的回答：

• Absolutely positioned flex item is not removed from the normal flow in IE11