CSS flex-wrap: Put gap between items unless wrapped?

Question

I come often across with this scenario, where i have i.e. 2 flex-children, with property flex-direction row. so they are first shown side by side with a gap between them (margin-right).

And by resize, as soon as there is not enough space left for both, flex-wrap moves the second child under the first one, so i don't need the margin-right from 1. item anymore.

Can i dynamically set the margins depends on the "wrap" status?

Fiddle: https://jsfiddle.net/ejmhxztd/

Fiddle Note: You should resize the window (reduce width) and see the wrapped case. If you continue reducing the width, you will see that the text of the first child will also split into 2 lines, since the margin-right is there and takes space.

.parent {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap
}

.child1 {
  margin-right:300px
}

<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>

it is actually pretty easy to imagine.. still here it is: https://jsfiddle.net/ejmhxztd/ You should resize the window (reduce width) and see the wrapped case. the margin right is still there — akcasoy, Dec 13 '18 at 06:47
What do you want to see on the right? do you have another element there? Otherwise, this margin is "transparent". — Itay Gal, Dec 13 '18 at 07:03
That's not possible with CSS and Flex alone. It will be easier to suggest a work around if we'll know what is your end result. — Itay Gal, Dec 13 '18 at 07:11
AFAIK, the most common solution to this is to give a margin for the childs all around (`margin:150px` instead of `margin-right:300px`) then have a negative margin on the parent (`margin:-150px`) to be left with only the gap between the children. — domsson, Dec 13 '18 at 07:12
when wrapped, i do not want to lose any space for margin! this is what i want — akcasoy, Dec 13 '18 at 07:13
@domsson it looks promising. if you can change the fiddle and write this as an answer i will accept it — akcasoy, Dec 13 '18 at 07:20
@akcasoy Check out this, for example: https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items — domsson, Dec 13 '18 at 08:03
@akcasoy This might also be relevant: https://stackoverflow.com/questions/40890613/remove-space-gaps-between-multiple-lines-of-flex-items-when-they-wrap — domsson, Dec 13 '18 at 08:04
@ItayGal column-gap looks like the answer.. what do u think? It really just adds the gap until the flex is wrapped. — akcasoy, Dec 11 '20 at 11:53

score 5 · Answer 1 · answered Dec 08 '20 at 18:06

I know this is an old issue, but you can use "column-gap" and "row-gap" to define gaps only in some direction.

For example:

.class{
  display: flex;
  align-items: center;
  column-gap: 10px;
  flex-wrap: wrap-reverse;
  flex-direction: row;
}

In this case, the gap will only affect in columns.

score 0 · Answer 2 · answered Dec 13 '18 at 08:51

You can try to use CSS-grid for this:

.parent {
  display:grid;
  grid-column-gap:300px;
  grid-template-columns:repeat(auto-fit,minmax(100px,max-content));
}
.parent > * {
  border:1px solid;
}

<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>

CSS flex-wrap: Put gap between items unless wrapped?

2 Answers2