html - 使 flex 容器的 child 不是 flex 元素

Question

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

是否可以让 flex 容器的子容器不表现为 flex 元素？示例:

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

有什么方法可以让 child 3 表现得像一个普通的显示 block ？是否由于父 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 或类似的方法将 child 从 flex 容器中取出。我正在寻找的是一种方法，使其中一个子元素表现为 block 元素(或 inline 元素)，同时保持 flex 容器的子元素。

Answer 1

根据问题编辑更新

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

不过，可以做的是不对一个元素使用任何 flex 属性，从而使其表现得像 block 元素或内联 block 元素。

例如，结合 flex-wrap: wrap 使元素能够换行，给第三个元素 flex: none 将使其表现得像一个内联 block ，给它 width: 100% 它将表现为一个 block (如下所示)。

当谈到 flex 容器属性时，有些可以在元素上被覆盖，比如 align-items/align-self，有些不能，比如 justify -内容。

要在您给定的代码示例中模仿 justify-content，可以使用自动边距，并结合使用 order 属性和伪元素的技巧，可以使第三个行为像一个内联 block :

.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 元素的显示类型:

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

---

初步回答

Is it possible to have a child of a flex container not behave as a flex item?

没有好的跨浏览器解决方案可以使 flex 容器子元素不表现为 flex 元素。

可以使用绝对定位，虽然它会使元素脱离流，但在涉及内容流时它不会表现得像 block 元素。

Is there any way in which child three could be made behave as a normal display block?

基于一个普通的 block 元素占据它自己的一行，填充它父级的宽度，你可以通过添加 flex-wrap: wrap 到容器并给第三个元素一个宽度为 100%，使其表现得像一个。

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

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

---

如果不能使用包装器，您可以使用右边距，但由于基于百分比的边距在不同浏览器上可能呈现不同，您需要正确测试它，或使用另一个单位，例如视口(viewport)单位，如 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>

---

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

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