👀 Views: 66 💬 Answers: 1 📅 Created: 2025-05-31

css flexbox react JavaScript

I'm migrating some code and I've been banging my head against this for hours... I'm facing an issue with aligning items within a flex container using CSS Flexbox in my React application. I have a component that includes a header and a content area, and I want the items in the content area to be perfectly centered both vertically and horizontally. However, when I resize the window, the items shift unexpectedly, especially on smaller screens. Here's the relevant CSS code I used: ```css .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 20px; } .header { margin-bottom: 20px; } .content { display: flex; justify-content: space-around; width: 100%; } .item { background-color: lightgray; padding: 10px; flex: 1; margin: 10px; } ``` And here's a snippet of my React component: ```jsx import React from 'react'; const MyComponent = () => { return ( <div className="container"> <div className="header">Header</div> <div className="content"> <div className="item">Item 1</div> <div className="item">Item 2</div> <div className="item">Item 3</div> </div> </div> ); }; export default MyComponent; ``` When I resize the window, the items sometimes stack on top of each other instead of maintaining their layout. I’ve tried using `flex-wrap: wrap;` on the `.content` class, but that didn’t fix the issue. I also checked for any conflicting styles in other parts of my CSS. I would appreciate any insights on how to ensure that the layout remains consistent across different screen sizes without overlapping. I'm currently using React 17 and CSS Flexbox for layout. Any help would be greatly appreciated! For context: I'm using Javascript on Linux. Any pointers in the right direction?