0

2 element inside a container with display:block margins collapse, but with display:flex is not working ! example

  .wrapper {
  width: 50%;
  margin: 0 auto;
}
.container {
  display: flex;
  // display: block;
  flex-flow: column nowrap;
  background-color: green;
}
h1 {
  background-color: #777;
  margin-bottom: 20px;
}
p {
  background-color: #ccc;
  margin-top: 15px;
}
Petr
  • 85
  • 1
  • 11
  • Perhaps I misspoke. Margin top bottom should stay. .container must have display:flex is unchanged. Setting display:flex on the p and h1 did not give... And change flex-wrap nothing . – Petr Apr 18 '17 at 08:52
  • can you please provide a image or draw of what you are looking for? you explanation & comment are not very clear – Korbin Apr 18 '17 at 08:57

1 Answers1

0

Margins does not collapse when one use display: flex. If you want to know more about collapse margins in general, here is a couple of articles to start with:

As a workaround, to make it behave similar to display: block, you could do something like this, where you add a flex class to container's that has display: flex, to target only h1 and p.

And if you can't do that manually, a script could do that work for you.

.wrapper {
  width: 50%;
  margin: 0 auto;
}
.container {
  display: flex;
  /* display: block; */
  flex-flow: column nowrap;
  background-color: green;
}
h1 {
  background-color: #777;
  margin-bottom: 20px;
}
p {
  background-color: #ccc;
  margin-top: 15px;
}


/* custom classes to remove margin */
.container.flex h1:first-child {
  margin-top: 0;
}
.container.flex p:last-child {
  margin: 0;
}
<div class="wrapper">
  <div class="container flex">
    <h1>header h1</h1>
    <p>plain text</p>
  </div>
</div>
Asons
  • 81,773
  • 12
  • 93
  • 144
  • That's the point that I can't remove margin-top: 15px; margin-bottom: 20px; This example is part of a larger project that carries over to flexbox. That is, I can never get a margin of collapse of a fast with flexbox? – Petr Apr 18 '17 at 12:40
  • @Petr No, you can't get margin collapse with flexbox. So why can't you remove the margin? – Asons Apr 18 '17 at 12:47
  • @Petr Updated my answer with some more suggestions – Asons Apr 18 '17 at 13:02
  • I can remove the margin, but I expect the effect of the collapse of (15 and 20) – Petr Apr 18 '17 at 16:09
  • @Petr Well in the given case my answer do that, but if the `p` has a higher top margin than the `h1`'s bottom, it should be that value (collapsed margin uses the highest of the two), though since `flexbox` doesn't know that, you have to tell it. Again, a small script could parse through those elements and check which value to use, or if you, at design time, know, you can use different classes to make it happen – Asons Apr 18 '17 at 16:13
  • @Petr Bottom line, I explained why this happens and how to solve it, so there is not much more to do. – Asons Apr 18 '17 at 16:17
  • Do I understand correctly ?, you show me how to get around a collapsing margin? And I'm interested in the mechanism of collapse, it's just not working on flexbox ? – Petr Apr 21 '17 at 12:21
  • @Petr Yes, I tried to show a way to deal with none collapsed margin, since margins does __not__ collapse when you use `display: flex`. If you only want to know about collapse margins in general, there is no point for me to write up all that when there is so many good articles already, and here is a couple to start with: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ... https://css-tricks.com/what-you-should-know-about-collapsing-margins/ – Asons Apr 21 '17 at 12:35
  • Thank you! write it in the answer , so I can put "solved" – Petr Apr 24 '17 at 05:23
  • @Petr You're welcome, updated my answer – Asons Apr 24 '17 at 06:00