Seeking a solution for a flexible layout using flexbox:
Requirements for Desktop Layout
- Consist of two responsive columns
- 1st column should occupy 30% of the width
- 2nd column should occupy 70% of the width
Mobile Layout Specifications
- Single column that responds to different screen sizes
- 1st row with full width (equivalent to the 1st column on Desktop)
- 2nd row with full width (equivalent to the 2nd column on Desktop)
Current Progress:
For toggling between mobile and desktop modes, setting flex-direction: column on the flex container seems to solve the issue.
#flexContainer {
display: flex;
}
#flexItem1 {
background-color: lightblue;
flex: 30%;
}
#flexItem2 {
flex: 70%;
background-color: lightgreen;
}
Please Note:
This inquiry focuses on adjusting CSS flexbox properties for transitioning from Desktop to Mobile Layouts. It is not about detecting window size or media queries. My apologies if this was unclear initially.
QUESTION
Is there a more efficient approach for achieving this layout switch?
Do I need to change the flex property of the flexItems to 100% in mobile mode, or can they remain as 30% and 70% since they don't impact the layout when flex-direction is set to column?
function App() {
const [mobile,setMobile] = React.useState(false);
return(
<React.Fragment>
<div id="flexContainer" style={mobile ? {flexDirection: 'column'} : null}>
<div id="flexItem1">Item 1</div>
<div id="flexItem2">Item 2</div>
</div>
<button onClick={()=>setMobile(prevState=>!prevState)}>Toogle</button>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));#flexContainer {
display: flex;
}
#flexItem1 {
background-color: lightblue;
flex: 30%;
}
#flexItem2 {
flex: 70%;
background-color: lightgreen;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>