In a flex container, you might use
justify-content to space the child items from each other. With a certain number of child items, the layout will look okay. However, when they increase or decrease, the layout will look odd.
Consider the following example.
We have a flex container with four items. The spacing between each item isn’t a
margin, it’s there because the container has
When the number of items is less than four, here is what will happen.
This isn’t good. There are different solutions to this:
- Flexbox gap (Use with caution)
- Padding (Can be applied to the parent of each child element)
- Adding empty elements to act as a spacer.
For simplicity, I will use
Examples and use cases
Support Defensive CSS
Do you like the content? You can buy me a cup of coffee. Thank you!