使flex容器的子元素不成为flex项目

Question

我认为这与display:flex属性的工作方式完全相反，但我想知道是否可能，或者是否有一种hack方法。

有没有可能使flex容器的子元素不像flex项一样呈现？例如： http://jsbin.com/jusehedumi/edit?html,css,output 是否有任何方法可以让第三个子元素表现得像一个普通的块元素？而不会因为父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>

< p > 编辑：我知道可以使用position: absolute或类似方法将子元素从flex容器中移出。我要找的是一种让其中一个子元素保持作为flex容器的子元素，同时表现为块级元素（或内联元素）的方法。

- Obed Parlapiano

---

你想对这个块做什么？你能用position: absolute覆盖flex行为吗？ - undefined

这主要是一个好奇的问题。我有一个实际的用例，但是我觉得更容易稍微改变一下HTML和我的样式方法，而不是破坏flex应该工作的方式。不过，对其他人来说可能是一个有用的问题！ - undefined

@ObedMarquezParlapiano 更新了我的答案。正如你所看到的，有多种方法可以使弹性项表现为块级或内联级，但具体的实现方式取决于想要达到的目标。 - undefined

Answer 1

根据问题编辑更新

不，没有任何属性可以使flex容器的子元素停止成为flex项目。

但可以在其中一个元素上不使用任何flex属性，从而使其表现为块级或内联块级元素。

例如，与启用项目换行的flex-wrap: wrap组合使用，给第三个项目flex: none将使其表现为内联块级元素，给它width: 100%将使其表现为块级元素（如下所示）。

当涉及到flex容器属性时，某些属性可以在项目上被覆盖，如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>

---

作为注意事项，以下是一个很好的答案，描述了flex项的显示类型：

• 什么是flex项的“display”属性允许的值？（flex项的子元素布局无关紧要）

---

原始回答

是否可能使flex容器的子元素不表现为flex项？

没有良好的、跨浏览器的解决方案可以使flex容器子元素不表现为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>

- Asons

Answer 2

只有作为弹性容器的内部流元素才是弹性项目。

因此，作为绝对定位子元素或超出子元素范围的后代元素的元素不是弹性项目，会忽略弹性属性。

更多详情请查看我的答案：

• IE11中绝对定位的弹性项目未从正常流中移除

- Michael Benjamin

---

对！我知道，应该让我的回答更清楚一些。我的意思是，即使在 flex 容器内部，也要让子元素表现得像一个 block 元素。 - undefined

从技术上讲，弹性项目是块级元素，只不过它们存在于弹性格式化上下文中。你应该退一步，解释主要目标，而不是你认为的解决方案的路径。尽量避免XY 问题。 - undefined