2

I have a flex box and I'd like to make sure that each item has a minimum gap between them. I've found the gap property but when I look up the property on MDN it says it's unsupported in all browsers except Firefox.

It works in Firefox but in Chrome it doesn't appear to.

Is there another CSS property I could use for other browsers or should I stick with margin-right? Could I use both? 

#GroupGap {
    position: absolute;
    width: 349px;
    height: 14px;
    left: 0;
    top: 80px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 25px; /* test */
    grid-gap: 50px; /* test */
}

#Group {
    position: absolute;
    width: 349px;
    height: 14px;
    left: 0;
    top: 30px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
}

/* add animation to class  */
.group {
 animation: resize 2500ms linear 0s infinite;
}

/* size width transition */
@keyframes resize {
 0% {
  width: 72%;
 }
 37.5% {
  width: 72%;
 }
 50% {
  width: 50%;
 }
 87.5% {
  width: 50%;
 }
 100% {
  width: 72%;
 }
}

/* add margin to group to apply to group items */
.itemGap > * {
    margin-right: 25px;
}

/* add margin to group to apply to group items */
.itemGap > *:last-child {
    margin-right: 0;
}

/* add outline around group */
.menu {
   outline: 1px dashed rgba(0,0,0,.35);
}
#label1 {
    position: absolute;
    left: 0;
    top: 60px;
}
body { 
  font-family: Arial, sans-serif; 
  font-size: 11px;
}
<div>Group items with margin right:</div>
<div id="Group" class="menu group itemGap">
  <div>
   <span>Home</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Services</span>
  </div>
  <div>
   <span>About</span>
  </div>
  <div>
   <span>Contact</span>
  </div>
 </div>
  
 <div id="label1">Group with gap and grid gap:</div>
 
  <div id="GroupGap" class="menu group">
  <div>
   <span>Home</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Services</span>
  </div>
  <div>
   <span>About</span>
  </div>
  <div>
   <span>About</span>
  </div>
  <div>
   <span>About</span>
  </div>
  <div>
   <span>Contact</span>
  </div>
 </div>

Update:
Using margin right on each item and removing it on the last item seems to work. 

/* add a right margin on each item */
.itemGap > * {
    margin-right: 25px;
}

/* remove right margin on last item */
.itemGap > *:last-child {
    margin-right: 0;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child https://developer.mozilla.org/en-US/docs/Web/CSS/gap

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    You have to use `CSS` Prefixer for browser support. Also `grid-gap` or `gap` will use different way for when parent set `display` property `flex` or `grid`. When parent `display` property `flex` then `grid-gap` or `gap` property will work with parent element and when `display` property `grid` then `grid-gap` or `gap` property will work with child element. – Rahul Nov 30 '19 at 16:55
  • 2
    It's still experimental. Don't use it for production site. – Rahul Nov 30 '19 at 17:01
  • This question is "if gap property is supported in late 2019 and safe alternative if not." The linked question is about how to add a gap between flexbox or grid items. – 1.21 gigawatts Dec 01 '19 at 19:02

3 Answers3

2

I think the best answer to this StackOverflow post might help you with this: Better way to set distance between flexbox items :)

TL;DR: The "cleanest" way is to set padding: 5px on the container and margin: 5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Tom de Visser
  • 55
  • 10
  • Thanks. I had found that at some point in the past because I have upvoted some of the answers. A lot of the answers are for wrapping grid items or switching to grid. I'm looking for using only Flexbox and have a fallback where gap isn't supported. – 1.21 gigawatts Nov 30 '19 at 16:18
  • 1
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/24729820) – Jason Aller Nov 30 '19 at 20:26
  • @JasonAller Thanks for your feedback. I actually considered that, but the reason for not copying it was that it was quite a long answer and I didn't want to flutter the page. Still new to this page, so I'm careful with what I post, but I'll edit it straight away. :) – Tom de Visser Nov 30 '19 at 22:30
1

According to caniuse the CSS grid-gap, along with the other grid properties are quite well supported by newer browsers with just a few exceptions

Global support 91.89%

https://caniuse.com/#feat=css-grid

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • Setting grid-gap doesn't seem to do anything for me (see example). I'm stuck using flexbox for now. – 1.21 gigawatts Nov 30 '19 at 16:16
  • 1
    If you want to use gap in a "well supported" way, then you need to use grid. If you can't leave the flexbox display, then it's better to rely on orher properties like margins or maybe try using pseudo elements. – rafaelcastrocouto Nov 30 '19 at 16:20
  • Thanks. When it's possible to switch to grid I'm glad to know I'll be able to use it reliably. – 1.21 gigawatts Nov 30 '19 at 16:35
1

It seems it's not supported in any browser except Firefox.

Using a style declaration that adds a right margin to the group items except for the last item seems to work.

CSS: 

/* add a right margin on each item */
.itemGap > * {
    margin-right: 25px;
}

/* remove right margin on last item */
.itemGap > *:last-child {
    margin-right: 0;
}

Add the itemGap class to the flex box group.

As @michael-b suggests this works too: 

.itemGap > div + div {
    margin-left: 25px;
}


#Group {
    width: 349px;
    height: 14px;
    left: 0;
    top: 0px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
}

/* add animation to class  */
.group {
 animation: resize 2500ms linear 0s infinite;
}

/* size width transition */
@keyframes resize {
 0% {
  width: 82%;
 }
 37.5% {
  width: 82%;
 }
 50% {
  width: 50%;
 }
 87.5% {
  width: 50%;
 }
 100% {
  width: 82%;
 }
}

/* add margin to group to apply to group items */
.itemGap > * {
    margin-right: 20px;
}

/* add margin to group to apply to group items */
.itemGap > *:last-child {
    margin-right: 0;
}

/* add outline around group */
.outline {
   outline: 1px dashed rgba(0,0,0,.35);
}

body { 
  font-family: Arial, sans-serif; 
  font-size: 11px;
}
<div id="Group" class="outline group itemGap">
  <div>
   <span>Home</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Products</span>
  </div>
  <div>
   <span>Services</span>
  </div>
  <div>
   <span>About</span>
  </div>
  <div>
   <span>Contact</span>
  </div>
 </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231