Issue with CSS Flexbox Alignment on Mobile Devices

Developing with Concrete
1

I’m facing an alignment problem with CSS Flexbox on mobile devices. I have a flex container with child elements, and I’m using justify-content: space-between; to create equal spacing between items. However, on certain mobile devices, the spacing appears uneven, and items are not aligning as expected.

Here’s a simplified version of my CSS code:

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  /* Item styling */
}

Is there a known issue with justify-content: space-between; on specific mobile browsers? What could be causing this inconsistency, and are there any workarounds or best practices I should consider to ensure consistent alignment across various mobile devices?

Any insights or suggestions would be greatly appreciated. Thank you!

2

The items need to have a width set on them otherwise they go to the width of the content inside.

Try % widths so three columns would be 33.33% etc

https://www.tutorialrepublic.com/faq/how-to-set-space-between-flex-items-using-css.php