1

I have two elements in my web page, let's say:

.host {
  display: flex;
  justify-content: spece-between;
}

.left {
  width: 300px;
  margin-bottom: 20px;
}

.right {
  width: 300px;
}
<div class='host'>
  <div class='left'></div>
  <div class='right'></div>
</div>

This puts the left and right div on the same row when the host div is wide enough. And wrap the row if the width of the host div is less than 600px.

The thing is that I want to add a margin between the left and right div, otherwise when the width of the host is exact 600px, there is not space between the two.

I can't simply add a margin-right to left div because that will make the two element have different width when the row is wrapped.

Is there some elegant solution to achieve that?

Thanks!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
pkxuzh
  • 11
  • 1
  • 1
    You might be interested in this [Flexbox gutters and negative margins](https://www.rawkblog.com/2019/01/flexbox-gutters-negative-margins-solved/) article. – chriskirknielsen Apr 28 '20 at 20:42
  • Until [the `gap` property](https://www.w3.org/TR/css-align-3/#gaps) becomes available for flex containers, you'll have to hack your way to a solution using margins, spacer elements or something else. However, an elegant and simple solution is available in grid layout using `auto-fit` and `grid-gap`. https://jsfiddle.net/qyert2fm/ – Michael Benjamin Apr 29 '20 at 15:06

0 Answers0