Question

给出以下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 and B

这是CodePen。

A包含在<div>中，因此它的边距会被忽略。

问：如何使用弹性框模型实现B（边距）的A行为？

注意：div包装器可以深入多个级别

定位：最新的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

Safari中： Safari

不幸的是，@ cimmanon提到它在Safari中不起作用，所以我仍然需要一些帮助。

Answer 1

您所看到的实际上与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;
}

Answer 2

最后，我提出了正确的解决方案（针对我的具体问题）。

.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

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

所有的功劳归于cimmanon，指向我正确的＆＃34;保证金崩溃＆＃34;方向

Flex-box忽略包裹儿童的边距（边缘折叠）

2 个答案: