Flex盒忽略包装的孩子的边缘（边缘崩溃） [英] Flex-box ignores wrapped children's margin (margin collapse)

问题描述

给定以下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; 
} 
  

这里是

我使用 display：inline-block .inner 以禁用边距折叠，然后用 width：100％补偿丢失的宽度。

所有的功劳都归功于 cimmanon 指向我的右边 direction

Given the following HTML:

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

and the following CSS (prefix free):

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

  height: 100px;
  width: 100px;

  background: red;
  margin: 10px;
}

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

Here is a CodePen.

A is wrapped in a <div> so it's margin gets ignored.

Q: How can I achieve B's behavior for A (margin) with the flex box model?

Note: The div wrappers can go multiple levels deep

Targeting: latest Chrome/Safari/iOS

Thank you very much for your help!

Edit: Thanks to @JoséCabo I came up with this:

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

Unfortunately it doesn't work in Safari as mentioned by @cimmanon, so I still need some help.

解决方案

Finally I came up with the right solution (for my specific problem).

.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

I'm using display: inline-block on .inner to disable margin collapsing and then compensate for the lost width with width: 100%.

All the credit goes to cimmanon for pointing me in the right "margin collapse" direction

这篇关于Flex盒忽略包装的孩子的边缘（边缘崩溃）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！