Search code examples
csslayoutflexbox

Flex gap adding space only to the left of children?

I'm making a category selection section that is supposed to overflow on small viewports and be scrollable.

But for some reason when I add flex gap its only adding space to the left of the children.

https://codepen.io/DanNisenson/pen/xxzYYpq

`

.sections {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-weight: 700;
}

`

For the moment I've removed the gap property and set padding left and right to the children. Can anyone tell me what I'm missing?

Solution

  • the gap property is used to set space between a flex container children only. What happens in your case, is that you have an invisible sections-scroll-shadow div which is making the gap between it and the first visible element possible.

    Nothing is wrong there, you could add an empty element at the end of your sections, or better: set a padding on the parent container.