Writing flexbox code for 2-column and 3-column on desktop and mobile (wrap)

Question

I'm having a real hard time figuring out this CSS flexbox solution. Basically there are 2 issues, one with a 2-column and another with a 3-column layout.

2-Column:
This, I think, may be pretty straightforward:

3-Column:
This is probably a bit more advanced:

The container class is, well, .container, and the children are just .left, .right, and .middle. Not sure if it's relevant, but the width of .container is 100% of viewport. I should probably add that using Bootstrap is not possible, due to reasons out of my control.

Answer 1

Here's how you do it for the three columns. I'm only adding that, because it's a bit more tricky:

.container {   display: flex;   flex-wrap: wrap;   flex-direction: row;   justify-content: flex-start;   align-items: stretch; }  .left {   order: 1;   background: red;   flex-basis: 100%;   height: 300px }  .middle {   order: 3;   background: green;   flex-basis: 100%;   height: 300px; }  .right {   order: 2;   background: yellow;   flex-basis: 100%;   height: 300px; }  @media screen and (min-width:600px) {   .container {     flex-wrap: nowrap;   }   .left {     flex-basis: 200px;     order: 1;   }   .middle {     flex-basis: 1;     order: 2;   }   .right {     flex-basis: 200px;     order: 3;   } }

<div class="container">   <div class="left"></div>   <div class="middle"></div>   <div class="right"></div> </div>

And the fiddle http://jsfiddle.net/2touox81/

As you can see, you can set column order for flex items.

Hope this helps.

Answer 2

I will assume desktop means screen wider than 600px, mobile less.

The 2-column layout is very simple:

body {   display: flex;   /* Magic begins */   flex-wrap: wrap; /* Allow multiple lines */ } #left, #right {   flex: 1 300px;   /* Initial width of 600px/2                       Grow to fill remaining space */   min-width: 0;    /* No minimal width */ } 

body {    display: flex;    flex-wrap: wrap;    text-align: center;    font-weight: bold;  }  #left, #right {    flex: 1 300px;    min-width: 0;    background: #f55;    padding: 15px 0;  }  #right {    background: #57f;  }

<div id="left">Left</div>  <div id="right">Right</div>

The 3-column is only a bit more complex:

body {   display: flex;            /* Magic begins */ } #left, #right, #middle {   min-width: 0;             /* No minimal width */ } #left, #right {   flex-basis: 200px;        /* Initial width */ } #middle {   flex: 1;                  /* Take up remaining space */ } @media screen and (max-width: 600px) { /* Mobile */   body {     flex-direction: column; /* Column layout */   }   #left, #right {     flex-basis: auto;       /* Unset previous 200px */   }   #middle {     order: 1;               /* Move to the end */   } } 

body {    display: flex;    text-align: center;    font-weight: bold;  }  #left, #right, #middle {    min-width: 0;    padding: 15px 0;  }  #left, #right {    flex-basis: 200px;    background: #f55;  }  #right {    background: #57f;  }  #middle {    flex: 1;    background: #5f6;  }  @media screen and (max-width: 600px) {    body {      flex-direction: column;    }    #left, #right {      flex-basis: auto;    }    #middle {      order: 1;    }  }

<div id="left">Left</div>  <div id="middle">Middle</div>  <div id="right">Right</div>