Control flexboxes on smaller screensizes

flexbox
flex-basis
flex-grow
css grid
flexbox cheat sheet
flexbox grid
flexbox height fit content
flex-shrink

I am trying to learn how to work with flexboxes. I have made an example here:

/* Grid */

.column {
  flex-basis: 100%;
}

@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}
<div class="row">
  <div class="column">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column">
    Column 4 - 33.3%
  </div>
  <div class="column">
    Column 5 - 33.3%
  </div>
  <div class="column">
    Column 6 - 33.3%
  </div>
</div>

As the easiest way to do this is with CSS Grid layout I've included that later in the answer. First, though, is the flex layout.

I've amended your HTML, though, since it's far easier without the .row() wrapper elements. Note, also, that I've used minimum, and maximum, widths of 500px instead of 800px; this is simply to demonstrate more easily within a Stack Snippet and JS Fiddle demo; if you replace the widths in the demo with your own preferred widths they'll work just the same for those widths.

/* For screens less than 500px in width: */

@media screen and (max-width: 500px) {
  .cell1,
  .cell6 {
    /* here we want these elements to grow to a
       size twice that of their siblings, not to
       shrink at all and be 100% wide minus the
       doubled width of the margin (we use a CSS
       custom property to set the margin on the
       elements) */
    flex: 2 0 calc(100% - var(--margin) * 2);
  }
  .cell2,
  .cell3,
  .cell4,
  .cell5 {
    /* The remaining cells are all set to neither
       grow nor shrink, and their flex-basis is
       50% minus the calculated width of the
       margins in order to allow two elements
       per row: */
    flex: 1 0 calc(50% - var(--margin) * 2);
  }
}
/* for screens larger than 500px width: */
@media screen and (min-width: 500px) {
  .cell1 {
    /* This element is up to three times
       the size of its siblings, does not
       shrink in relation to them and has
       a flex-basis of 100% minus the width
       of the margins: */
    flex: 3 0 calc(100% - var(--margin) * 2);
  }
  .cell2,
  .cell3 {
    /* two elements per 'row': */
    flex: 2 0 calc(50% - var(--margin) * 2);
  }
  .cell4,
  .cell5,
  .cell6 {
    /* three elements per 'row': */
    flex: 1 0 calc(33.3% - var(--margin) * 2);
  }
}


/* to force widths to be more consistently applied
   between different element-types and browsers: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* the declaration of the --margin
     custom property used in the @media
     rules; allowing changes to be made
     in only one place: */
  --margin: 5px;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.flex {
  /* using flex-layout: */
  display: flex;
  justify-content: space-between;
  /* allowing elements to wrap within
     the flex container: */
  flex-wrap: wrap;
}

.cell {
  padding: 15px;
  border: 1px solid #666;
  background: #343436;
  /* using the --margin custom property
     to set the margins of the elements:*/
  margin: var(--margin);
}
<div class="flex">
  <!-- what you were calling 'columns' were cells within
       a column; therefore I've adjusted both the text
       and the HTML itself; here the common class for
       all elements within the container is 'cell' for
       shared styles, and each cell can be targeted
       by its position; I used classes instead of id
       in case you have multiple flex-layouts within
       the same document with the same style: -->
  <div class="cell cell1">cell 1</div>
  <div class="cell cell2">cell 2</div>
  <div class="cell cell3">cell 3</div>
  <div class="cell cell4">cell 4</div>
  <div class="cell cell5">cell 5</div>
  <div class="cell cell6">cell 6</div>
</div>

Controlling Ratios of Flex Items Along the Main Axis, We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500� There we have it: you can completely control flexibility with flexbox’s sizing properties! In this tutorial, I used a horizontal layout set by flex-direction: row , so space allocation happened along the horizontal (left to right) axis and flex-grow , flex-shrink , and flex-basis modified the width of the flex items.

This would be my solution:

.column {
  flex-basis: 100%;
}

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .column {
    flex: 1;
  }
}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  .special{
    min-width: calc(100% - 40px);
  }
}
<div class="row">
  <div class="column">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column">
    Column 4 - 33.3%
  </div>
  <div class="column">
    Column 5 - 33.3%
  </div>
  <div class="column special">
    Column 6 - 33.3%
  </div>
</div>

A Comprehensive Guide to Flexbox Sizing, Flexbox sizing makes it possible to create flexible layouts that fully adapt to any extra space in-between flex items should be allocated on the screen. This happens when flex items are larger than the flex container. There we have it: you can completely control flexibility with flexbox's sizing properties! In this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. Fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox.

If you want to use flex, you'll need to add some classes and do some calc() on the flex-basis to account for your margins - along with using nth-child selectors.

Grid is a much better way to go, but here's a flex solution.

/* Grid */

* {
  box-sizing: border-box;
}

.column {
  flex-basis: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 799px) {
  .row {
    flex-wrap: wrap;
  }
  .row.two .column {
    flex: 0 0 calc(50% - 6px);
  }
  .row.two .column:nth-child(1) {
    margin-right: 6px;
  }
  .row.two .column:nth-child(2) {
    margin-left: 6px;
  }
  .row.three .column {
    flex: 0 0 calc(50% - 6px);
  }
  .row.three .column:nth-child(1) {
    margin-right: 6px;
  }
  .row.three .column:nth-child(2) {
    margin-left: 6px;
  }
  .row.three .column:nth-child(3) {
    flex: 0 0 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
<div class="row one">
  <div class="column">
    Column 1 - 100%
  </div>
</div>

<div class="row two">
  <div class="column">
    Column 2 - 50%
  </div>
  <div class="column">
    Column 3 - 50%
  </div>
</div>

<div class="row three">
  <div class="column">
    Column 4 - 33.3%
  </div>
  <div class="column">
    Column 5 - 33.3%
  </div>
  <div class="column">
    Column 6 - 33.3%
  </div>
</div>

Flexbox: How Big Is That Flexible Box? — Smashing Magazine, How do we control the size of our flex items, and what choices is the In the example below my three items have a small amount of content� CSS Flexbox Layout Module. Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage; Inline, for text; Table, for two-dimensional table data

Add flex-basis or flex to those column, here's the working code (make sure the viewport-width is greater than 800px):

// add these with along with corresponding markup in HTML.
  .col-12 {
    flex: 100%;
  }
  .col-6 {
    flex: 50%;
  }
  .col-4 {
    flex: 33.3%;
  }

jsfiddle: https://jsfiddle.net/bytprgwm/

or direct snippet:

/* Grid */

.column {
  flex-basis: 100%;
}


@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
  .col-12 {
    flex: 100%;
  }
  .col-6 {
    flex: 50%;
  }
  .col-4 {
    flex: 33.3%;
  }

}
/* Style */

body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}
<div class="row">
  <div class="column col-12">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column col-6">
    Column 2 - 50%
  </div>
  <div class="column col-6">
    Column 3 - 50%
  </div>
</div>

<div class="row">
  <div class="column col-4">
    Column 4 - 33.3%
  </div>
  <div class="column col-4">
    Column 5 - 33.3%
  </div>
  <div class="column col-4">
    Column 6 - 33.3%
  </div>
</div>

A Complete Guide to Flexbox, Note that CSS columns have no effect on a flex container. the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. you can't push an element such that it renders off-screen (e.g. off the top) in such a way� To have exact control we need to switch to flex-direction: column on the wrappers, whenever we want. To achieve this, we need media queries that change the flex-direction as the screen size shrinks. For the same screen width as the previous example, this looks much better.

RESULT


HTML

<div class="row">
  <div class="column column1">
    Column 1 - 100% 
  </div>
</div>

<div class="row">
  <div class="column column2">
    Column 2 - 50%
  </div>
  <div class="column column3">
    Column 3 - 50%
  </div>
</div>

<div class="row last-row">
  <div class="column column4">
    Column 4 - 33.3%
  </div>
  <div class="column column5">
    Column 5 - 33.3%
  </div>
  <div class="column column6">
    Column 6 - 33.3%
  </div>
</div>

CSS

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.column1 {
  width: 100%;
}

.column2 {
  flex: 1;
}

.column3 {
  flex: 1;
}

.last-row {
  flex-wrap: wrap;
}

.column4 {
  width: 33.3%;
  flex-grow: 1;
}

.column5 {
  width: 33.3%;
  flex-grow: 1;
}

.column6 {
  width: 33.3%;
  flex-grow: 1;
}

@media screen and (min-width: 800px) {
  .last-row {
    flex-wrap: nowrap;
  }    
}

/* Style */
body {
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;
  margin-bottom: 70px;
}

.column {
  padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;
  background: #343436;
}

main {
  max-width: 1200px;
  margin: 0 auto;
}

DEMO

https://codepen.io/wilsonbalderrama/pen/eYmgyNV

Tips to Make a Web App That Is Truly Responsive With Flexbox, Flexbox is a CSS3 layout model that solves usually tricky problems including how to the code for large screens and use media queries to adapt to smaller ones. The main axis controls the direction the flex items are laid out in. It ensures that the images always have a minimum size by displaying fewer� Yep, Chrome has some issues, especially with nested flexboxes. For example I've got a nested flex box with children that have height:100% but they are rendering with natural height instead. And the weird thing is if I change their height to auto , then they render as height:100% like I was trying to do.

Flex Cheatsheet, The flex-wrap property controls whether the flex container is single-line or After a flex container's contents have finished their flexing and the dimensions of all e.g. a small item won't shrink to zero before a larger item has been noticeably� A common request (or complaint) is that text or other items on the screen are too small to be seen clearly. There have always been ways to adjust the size of items displayed, but they’ve been somewhat obscure and occasionally something less than reliable. Windows 10 made this a lot easier.

Setting Flex Items Dimensions and order, When it comes to size, flex items inside a flex container behave in a "flex box" kind of Controlling the size of flex items mainly rests on the flex property, added to to appear first to indicate to search engines and screen readers its importance: width of 250px, though allowed to shrink if flex container becomes too small */. There's three possible reasons why your display is smaller than your screen size: - Incorrect monitor settings - Wrong refresh rate - Screen resizing settings are off in graphics software If it's the first reason, you'll need to access your monitor's settings using the buttons on the screen to adjust the screen size.

C38: Using CSS width, max-width and flexbox to fit labels and inputs, Define the size of layout regions using flexbox properties and media queries for the layout regions in the flexbox container as a row of adjacent flexbox items,�

Comments
  • While I appreciate you want learn how to use flex layout your comment, in the CSS, tells you that this layout should use grid layout, especially since you’re creating a two dimensional layout.
  • If you wanted that layout with your current html, you would need to allow your rows to wrap and the set sizes for your columns according to your layout
  • In your image you mention column 4, 5, and 6 as each having 33% width but it appears to 4 and 5 have 50% width and column 6 has 100% width. Which one is correct?
  • @TylerH I think the OP set it up with the markup from desktop, but mobile wants that last div to be 100%.
  • @MK-DK I wonder why you want 1 column layout in a large device while multiple columns layout for the small one?
  • Thorough answer, but cell 6 should be 100% of the width (according to OPs image)
  • @disinfor: for me, in both the linked JS Fiddle and Stack Snippet it is full width once the results viewport is below 500px (the width is changed in the answer for convenience). Does it not work for you? And if not, do you mean the flex or grid part? Or both?
  • You're right!! I forgot you mentioned you changed it to 500px and not the 800. It's all good!
  • @disinfor: that’s a relief! Thank you for taking the time to raise a possible problem, and for the earlier compliment.
  • No problem! I love answers like this on SO. Where not only do you give the markup, but also the resources to learn.
  • Good solution, but you need to account for the margin.
  • Check your code. It doesn't work how the OP wants it.
  • @disinfor did you try on the large (than 800px) screen, I saw it work pretty well.
  • @LoiNguyenHuynh It's supposed to change to what the image looks like BELOW 800px.
  • @disinfor ok. But I wonder why he wants 1 column layout in a big device while multiple columns in a small device