9

Simple layout with flexbox question:

Desktop Layout requirements

  • Two responsive columns
  • 1st column with 30% of the width
  • 2nd column with 70% of the width

Mobile Layout requirements

  • Single responsive column
  • 1st row with 100% width (this is the 1st column on Desktop)
  • 2nd row with 100% width (this is the 2nd column on Desktop)

What I've got so far:

When I toggle to mobile (via button click for example on snippet below) mode I set flex-direction: column on the flex container. It seems to work. 

#flexContainer {
  display: flex;
}

#flexItem1 {
  background-color: lightblue;
  flex: 30%;
}

#flexItem2 {
  flex: 70%;
  background-color: lightgreen;
}

NOTE:

This question is about which CSS flexbox properties need to be changed in order to go from Desktop Layout to Mobile Layout. It's not about how to detect the window size or how to set a media query. I'm sorry if the way I wrote it didn't make it very clear.

QUESTION

Is there a cleaner way on how to do this ? Do I need to set the flex property of the flexItems to 100% when on mobile mode or can I leave them as 30% and 70% as they don't seem to matter 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>
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
  • 1
    using *media query* to switch to `flex-direction: column` is a good way of handling it I guess... – kukkuz May 08 '19 at 16:37
  • Thanks! Although I'm not using media queries. But my question is concerning about the layout flexbox CSS properties per se (like, how to set the flex properties in a proper way to achieve that). Regardless of how I'm implementing the toggle from mobile to desktop. – cbdeveloper May 08 '19 at 17:00
  • media queries would be straightforward... here is a solution using a *wrapping flexbox* using `flex-basis` with respect to a mobile breakpoint https://codepen.io/anon/pen/MRNoZz – kukkuz May 08 '19 at 17:28

2 Answers2

9

Since you don't have any weird switch of columns from mobile to desktop, what I'd do is this (and I believe is the cleanest way)

Start thinking mobile first (mobile first IS best practice) and then use media queries for desktop version. Basically set your container to display block and set the width of both columns inside it to 100%. then on desktop, make your container flex with a query.

CSS:

#flexContainer {
  display: block;
  background-color: blue;
}

@media only screen and (min-width: 1024px) {
  #flexContainer {
    display: flex;
  }
}

Or as I would do it in SCSS:

#flexContainer {
  display: block;
  background-color: blue;

     @media only screen and (min-width: 1024px) {
        display: flex;
     }
}
Jabberwocky
  • 768
  • 7
  • 18
  • Thanks! And what would you do about the flexItems proportions? I need first column to be 30% and the second to be 70%. – cbdeveloper May 08 '19 at 17:25
  • 1
    @cbdev420 hey. I think in this case you need to read this [stack overflow post](https://stackoverflow.com/questions/36342921/specifing-width-of-a-flexbox-flex-item-width-or-basis). Also, try to avoid ids as a basis for css. General rule: ids are for grabbing this with js/react etc, classes are for styling. – Jabberwocky May 09 '19 at 12:03
  • What an interesting answer... matches this website perfectly.. [https://newbedev.com/flexbox-layout-with-two-columns-on-desktop-and-one-column-on-mobile](https://newbedev.com/flexbox-layout-with-two-columns-on-desktop-and-one-column-on-mobile) – Millhorn Aug 19 '21 at 21:03
  • 1
    @Millhorn It's the opposite, that's my genuine answer years ago. I'm flattered that somebody would steal it though. – Jabberwocky Aug 20 '21 at 10:13
1

You can use a break point with styled components.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.styled-components.com/docs/basics

Cypher
  • 11
  • 1