使弹性容器的子项不是弹性项目

Question

我相信这完全违背了该display: flex属性应该工作的方式，但我想知道它是否可能，或者是否有黑客攻击。

是否有可能让 flex 容器的子项不作为 flex 项目？例子：

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

有什么办法可以让孩子三成为一个正常的显示块？没有它由于justicity-content: center父 flex 容器而自动对齐？

纯粹的 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或类似方法将孩子从 flex 容器中取出。我正在寻找的是一种使其中一个子block元素表现为元素（或inline就此而言）同时保持 flex 容器的子元素的方法。

Answer 1

只有属于Flex 容器的流入子元素的元素才是 Flex 项目。

因此，绝对定位的子元素或超出Flex 容器子元素的后代的元素不是 Flex 项，并且会忽略 Flex 属性。

请参阅我的回答以了解更多详细信息：

• 绝对定位的弹性项目不会从 IE11 中的正常流程中删除

Answer 2

根据问题编辑更新

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

但是可以做的是，不要在一个元素上使用任何 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-item 的 `display` 属性的允许值是多少？（flex-item 的子项的布局无关紧要）

初步答复

是否有可能让 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>