1

I'm trying to use row-gap & column-gap in flexbox, but it doesn't seem to be doing anything, it doesn't have any effect?

Here is a Sandbox; The padding of the flex items seem to be working, but no matter what I put into row-gap or column-gap, it doesn't change anything?

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #333;
  font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
}

.flex {
  width: 800px;
  border: 5px solid rgb(75, 70, 74);
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
}

.flex > * {
  flex: 1 1 200px;
  background-color: rgba(75, 70, 74, .3);
  padding: 10px;
}
<div class="flex">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
  • there is no such property in the actual specification: https://www.w3.org/TR/css-flexbox-1/ .. they will be defined in the futur Spec: https://drafts.csswg.org/css-align-3/#propdef-row-gap not yet implemented. Only Firefox seems to support them – Temani Afif Feb 29 '20 at 12:09
  • You should use grid instead of flex.. Whether this is your expectation? https://codepen.io/manmur/pen/PoqjwLJ – Maniraj Murugan Feb 29 '20 at 12:21
  • Thanks. I was just wondering / thinking this would work, since as a comment to this answer https://stackoverflow.com/a/46775239/9316628 from 2017, Ilya Streltsyn wrote that it has been added to flexbox? – R. Kohlisch Feb 29 '20 at 12:29
  • it was added to the Spec. it doesn't mean browser have implemented the feature. There is a lot of time between *adding something to the Spec* and *all the browser implement the feautre*. – Temani Afif Feb 29 '20 at 12:36
  • thanks a lot. now i understand. if you submit this as an answer, i will accept. :) – R. Kohlisch Feb 29 '20 at 12:39

0 Answers0