1

I am currently learning flex CSS property, and I am using it display a bunch of divs with four per row at maximum. Here is HTML and CSS for it:

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: -5% -5% 0 -5%;
}

.step {
  text-align: center;
  display: inline-block;
  border: 2px solid black;
  margin: 5% 5% 0 5%;
  flex-grow: 1;
  height: 100px;
  width: 13%;
  overflow: auto;
}

.child {
  font-size: 1.25em;
}
<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>
</div>

The css Works exactly the way I want it to work in Chrome, but in firefox vertical gap between different rows is zero, while it is not so in Chrome. What am I doing wrong? (I have made a fiddle as well, https://jsfiddle.net/vLmnq7fL/2/ . Open in Chrome and firefox to see the difference)

Asons
  • 84,923
  • 12
  • 110
  • 165
stick
  • 88
  • 3
  • 8
  • I would have done it like I did here: https://jsfiddle.net/vLmnq7fL/8/. But the answer from @LGSon pretty much catches the essence of what I was going to answer. I just used an additional wrapper for each _step_. – Seika85 Jul 07 '17 at 11:46

2 Answers2

1

Using percent for padding's and margin's on flex items might render in different outputs on different browser since the spec's let them.

Also, when using percent for the top value in your margin:5%5% 0 5%; will be based on the parent's width, not height, will as well can give unpredictable result.

If you use viewport units it won't though margin:5vh5% 0 5%;

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: -5vh -5% 0 -5%;
}

.step {
  text-align: center;
  display: inline-block;
  border: 2px solid black;
  margin: 5vh 5% 0 5%;
  flex-grow: 1;
  height: 100px;
  width: 13%;
  overflow: auto;
}

.child {
  font-size: 1.25em;
}
<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>

I also recommend to not use negative margin's in the way you do in this sample, I suggest you do something like this instead, where you use margin's on the flex items child instead

I also used viewport units on all margin's instead of percent.

.outer {
  display: flex;
  flex-wrap: wrap;
}

.step {
  text-align: center;
  height: 100px;
  flex-grow: 1;
  flex-basis: 25%;
  overflow: auto;
}

.child {
  border: 2px solid black;
  margin: 5vh 5vw 0 5vw;
  height: calc(100% - 5vh);
  font-size: 1.25em;
  box-sizing: border-box;
}
<div class="outer" id="container">
  <div class='step' id=step0>
    <p class='child'> 1</p>
  </div>
  <div class='step' id=step1>
    <p class='child'> 2</p>
  </div>
  <div class='step' id=step2>
    <p class='child'>3</p>
  </div>
  <div class='step' id=step3>
    <p class='child'> 4</p>
  </div>
  <div class='step error' id=step7>
    <p class='child'>8</p>
  </div>
  <div class='step' id=step6>
    <p class='child'>7</p>
  </div>
  <div class='step' id=step5>
    <p class='child'>6</p>
  </div>
  <div class='step' id=step4>
    <p class='child'>5</p>
  </div>
  <div class='step' id=step8>
    <p class='child'>9</p>
  </div>
  <div class='step' id=step9>
    <p class='child'>10</p>
  </div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Hi! Can you explain to me why using negative margins is a bad idea? – stick Jul 08 '17 at 05:57
  • @stick Didn't say it is a bad idea, negative margin's can be very useful, sometimes the only solutions to make something work. What I mean is, if not needed, don't use it. I base that on the simple logic; if you use it as an overall technique and suddenly encounter a problem where it is the only way, than it might not do the magic it can, as you using it already. – Asons Jul 08 '17 at 07:36
0

Top and bottom margins in % don't work consistently (spec) when applied to flex items. I use px instead

itacode
  • 3,721
  • 3
  • 21
  • 23