Flex-box忽略了包裹在内部的子元素的外边距（外边距折叠）。

Question

Flex-box忽略了包裹在内部的子元素的外边距（外边距折叠）。

6

以下是给定的HTML代码：

<div class="outer">
  <div>
    <div class="inner">A</div>
  </div>
</div>
<div class="outer">
  <div class="inner">B</div>
</div>

以下是相关的CSS代码（无前缀）：

.outer {
  display: box;
  box-orient: vertical;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

A 和 B

这里有一个CodePen。

A 被包装在一个 <div> 中，因此它的外边距会被忽略。

问题：我如何使用 flex box 模型实现 B 对于 A 的行为（外边距）？

注意：包装器可以多层嵌套。

目标浏览器：最新版 Chrome/Safari/iOS。

非常感谢您的帮助！

编辑：感谢 @JoséCabo，我想到了这个解决方案：

.outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height:     50px;
  margin-top: 10px;
  background: green;
}

CodePen

Chrome: Chrome

Safari: Safari

很遗憾，如@cimmanon所述，它在Safari中不起作用，因此我仍然需要一些帮助。

- Stephan Bönnemann-Walenta

2

你知道吗？Box API已经被弃用了，现在必须使用display: flex; API。 - José Cabo

你想要得到什么结果？抱歉，我不理解你的意思。 - José Cabo

@JoséCabo 应该使用的属性非常取决于您要针对哪个浏览器。例如，Safari遵循较旧的规范之一。 - cimmanon

@JoséCabo 第二个结果（B）是所需的，但它应该与.outer和.inner之间的那些div包装器一起工作，就像（A）中一样。谢谢！ - Stephan Bönnemann-Walenta

2个回答

3

最终，我找到了适合我的问题的正确解决方案。

.outer {
  display: flex;
  flex-direction: column;

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

.inner {
  height: 50px;
  margin-top: 10px;
  background: green;
  display: inline-block;
  width: 100%;
}

CodePen

我在.inner上使用display: inline-block来禁用外边距折叠，然后通过width: 100%来补偿丢失的宽度。

所有的功劳都归功于cimmanon，让我找到了正确的“外边距折叠”方向。

- Stephan Bönnemann-Walenta

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cimmanon · Accepted Answer

你所看到的实际上与Flexbox无关，而是所谓的“边距折叠”。

.outer div {
  border: 1px solid;
}

添加边框可以防止边距折叠。建议在父容器上放置填充，而不是依赖于边距：

.outer {
  padding-top: 10px;
}

例子：

.wrapper {
  background: #eef;
  border: 1px solid darkgray;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -1em;
}
  
.item {
  flex-grow: 1;
  margin: 1em;
  border: 1px solid black;
  padding: 1em;
  min-width: 6em;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
  <div class='container'>
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>   
    <div class='item'>item</div>
    <div class='item'>item</div>
    <div class='item'>item</div>    
  </div>
  </div>
</body>
</html>

现在，为了覆盖你的所有前缀，你需要像这样做：

.outer {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100px;
  width: 100px;
  background: red;
  margin: 10px;
}