10

i am creating something with css flexbox and use gap to give spacing between elements but now i want to change the spacing of only one element like

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4{
  background: blue;
}
<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>

Now I want to change the gap of blue box to 5px from 20px is there any way to do this

Dai
  • 141,631
  • 28
  • 261
  • 374
dhanesh vaghasiya
  • 139
  • 1
  • 5

2 Answers2

17

  • The gap property only applies to flex-parents, not flex-items (flex-parents use it to control the gap between their child flex-items).

    • (The gap property also applies to display: grid;, but that's off-topic in this QA)

  • To adjust the spacing of flex-items use an overridden margin property instead.

    • For flex-direction: horizontal you'll want to set margin-left and margin-right (or margin-inline-start and margin-inline-end).

    • For flex-direction: vertical you'll want to set margin-top and margin-bottom (or margin-block-start and margin-block-end).

    • To have a larger effective gap then set any positive margin value.

      • e.g. with gap: 5px and margin-left: 1px then the effective gap to the left will be 6px.

    • To have a smaller effective gap then set a negative margin value.

      • e.g. with gap: 5px and margin-left: -1px then the effective gap to the left will be 4px.

    • This approach won't work for items with margin: auto, but that's okay because gap: isn't useful with auto margins anyway.

    • Don't forget that you can also use calc and --custom-properties to make the CSS easier to read, and to mix units (e.g. 3.2em margin with a 10px effective gap adjustment).

In your case, there's 20px on either side of your items, so applying a margin-left of -15px will give you a 5px left gap, and a margin-right of -15px will give you a 5px right gap.

Which looks like this:

enter image description here

Like so:

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4 {
  background: blue;
  margin-left: -15px; /* Adapt 20px gap to 5px */
  margin-right: -15px; /* Adapt 20px gap to 5px */
}
<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>
Dai
  • 141,631
  • 28
  • 261
  • 374
  • Isn't this fundamentally going against one of the good things about flexbox: you set the axis and semantically, your flex items shouldn't have to worry about it? If you set margin top/bottom and the flexbox changes to having column direction, your margin is now applied wrongly and should be left/right. There really ought to be a "margin-before/margin-after" concept in flexbox for individual items. – Jez Nov 15 '22 at 13:24
  • I wish there was a way of doing this via the parent component. I updated this answer although it seems hacky. – Fazwelington Feb 13 '23 at 19:07
0

.container{
  display: flex;
  gap: 20px;
}

.items{
  width: 100px; 
  height: 100px;
  background: red;
  
}

.item-4{
  background: blue;
  margin-left: -15px;
}
<div class="container">
  <div class="items item-1"></div>
  <div class="items item-2"></div>
  <div class="items item-3"></div>
  <div class="items item-4"></div>
  <div class="items item-5"></div>
  <div class="items item-6"></div>
</div>
Manoj Tolagekar
  • 1,816
  • 2
  • 5
  • 22