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;
}

甲和乙

这是一个CodePen。

A被包裹在 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;
}

代码笔

铬合金： 铬合金

苹果浏览器： 苹果浏览器

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

4

2 回答 2

6

你所看到的实际上与 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;
}
于 2013-02-24T23:14:07.913 回答
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%;
}

代码笔

我正在使用display: inline-blockon.inner禁用边距折叠，然后使用width: 100%.

所有的功劳都归功于 cimmanon为我指出了正确的“保证金崩溃”方向

于 2013-02-24T23:58:18.870 回答