CSS Flexbox Alignment guide with Wrapped Items in Safari iOS
I tried several approaches but none seem to work. I'm experiencing an scenario with flexbox alignment when items wrap in iOS Safari. I have a container set to display as a flexbox and I'm using `flex-wrap: wrap;` to allow items to wrap onto multiple lines. However, when the items wrap, they don't align to the center as expected. Here's a simplified version of my CSS and HTML: ```html <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> <div class="flex-item">Item 4</div> </div> ``` ```css .flex-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 300px; border: 1px solid #ccc; } .flex-item { flex: 1 0 100px; margin: 10px; padding: 20px; background-color: #f4f4f4; text-align: center; } ``` On desktop browsers, the items align perfectly in the center of the container when they wrap. However, on iOS Safari, the alignment seems to break, and the items stack on the left side instead. I’ve checked the box model, and there are no margins affecting the layout. I've also tried adding `-webkit-box-pack: center;` and `-webkit-align-items: center;` for compatibility, but it didn't resolve the scenario. I'm currently using Safari version 16.0 on an iPhone 12. Is there a known scenario with flexbox in iOS Safari or any workaround I could try to ensure proper centering of the wrapped items? I'd really appreciate any guidance on this.