Makzan / I share what I learned

CSS Flexbox Layout Foundation

Here is the code base for Flexbox layout.

It is mobile first and important content first.

*{box-sizing: border-box;}
img {max-width: 100%;}
.row {
  display: flex;
  flex-wrap: wrap;
}
.row .row {
  margin-left: -.5em;
  margin-right: -.5em;
}
.col {
  flex: 0 1 100%;
  padding: 0 .5em;
}
.small-1 {flex: 0 1 calc(100% / 12 * 1)}
.small-2 {flex: 0 1 calc(100% / 12 * 2)}
.small-3 {flex: 0 1 calc(100% / 12 * 3)}
.small-4 {flex: 0 1 calc(100% / 12 * 4)}
.small-5 {flex: 0 1 calc(100% / 12 * 5)}
.small-6 {flex: 0 1 calc(100% / 12 * 6)}
.small-7 {flex: 0 1 calc(100% / 12 * 7)}
.small-8 {flex: 0 1 calc(100% / 12 * 8)}
.small-9 {flex: 0 1 calc(100% / 12 * 9)}
.small-10 {flex: 0 1 calc(100% / 12 * 10)}
.small-11 {flex: 0 1 calc(100% / 12 * 11)}
.small-12 {flex: 0 1 calc(100% / 12 * 12)}
.small-shrink { flex: 0 1 auto; }
.small-auto { flex: 1; }
.small-hidden {display: none;}
.small-horizontal { flex-direction: row; }
.small-vertical { flex-direction: column; }

.show-in-small-only {}
.show-in-medium-only { display: none; }
.show-in-large-only { display: none; }

@media screen and (min-width: 550px) {
  .small-hidden {display: unset;}
  .show-in-small-only {display: none;}
  .show-in-medium-only { display: unset; }
  .show-in-large-only { display: none; }


  .medium-1 {flex: 0 1 calc(100% / 12 * 1)}
  .medium-2 {flex: 0 1 calc(100% / 12 * 2)}
  .medium-3 {flex: 0 1 calc(100% / 12 * 3)}
  .medium-4 {flex: 0 1 calc(100% / 12 * 4)}
  .medium-5 {flex: 0 1 calc(100% / 12 * 5)}
  .medium-6 {flex: 0 1 calc(100% / 12 * 6)}
  .medium-7 {flex: 0 1 calc(100% / 12 * 7)}
  .medium-8 {flex: 0 1 calc(100% / 12 * 8)}
  .medium-9 {flex: 0 1 calc(100% / 12 * 9)}
  .medium-10 {flex: 0 1 calc(100% / 12 * 10)}
  .medium-11 {flex: 0 1 calc(100% / 12 * 11)}
  .medium-12 {flex: 0 1 calc(100% / 12 * 12)}
  .medium-shrink { flex: 0 1 auto; }
  .medium-auto { flex: 1; }
  .medium-hidden {display: none;}  
  .medium-horizontal { flex-direction: row; }
  .medium-vertical { flex-direction: column; }

  .medium-order-1 {order: 1;}
  .medium-order-2 {order: 2;}
  .medium-order-3 {order: 3;}
  .medium-order-4 {order: 4;}
  .medium-order-5 {order: 5;}
  .medium-order-6 {order: 6;}
  .medium-order-7 {order: 7;}
  .medium-order-8 {order: 8;}
  .medium-order-9 {order: 9;}
  .medium-order-10 {order: 10;}
  .medium-order-11 {order: 11;}
  .medium-order-12 {order: 12;}
}

@media screen and (min-width: 850px) {
  .medium-hidden {display: unset;}
  .show-in-small-only {display: none;}
  .show-in-medium-only { display: none; }
  .show-in-large-only { display: unset; }


  .large-1 {flex: 0 1 calc(100% / 12 * 1)}
  .large-2 {flex: 0 1 calc(100% / 12 * 2)}
  .large-3 {flex: 0 1 calc(100% / 12 * 3)}
  .large-4 {flex: 0 1 calc(100% / 12 * 4)}
  .large-5 {flex: 0 1 calc(100% / 12 * 5)}
  .large-6 {flex: 0 1 calc(100% / 12 * 6)}
  .large-7 {flex: 0 1 calc(100% / 12 * 7)}
  .large-8 {flex: 0 1 calc(100% / 12 * 8)}
  .large-9 {flex: 0 1 calc(100% / 12 * 9)}
  .large-10 {flex: 0 1 calc(100% / 12 * 10)}
  .large-11 {flex: 0 1 calc(100% / 12 * 11)}
  .large-12 {flex: 0 1 calc(100% / 12 * 12)}
  .large-shrink { flex: 0 1 auto; }
  .large-auto { flex: 1; }
  .large-hidden {display: none;}
  .large-horizontal { flex-direction: row; }
  .large-vertical { flex-direction: column; }

  .large-order-1 {order: 1;}
  .large-order-2 {order: 2;}
  .large-order-3 {order: 3;}
  .large-order-4 {order: 4;}
  .large-order-5 {order: 5;}
  .large-order-6 {order: 6;}
  .large-order-7 {order: 7;}
  .large-order-8 {order: 8;}
  .large-order-9 {order: 9;}
  .large-order-10 {order: 10;}
  .large-order-11 {order: 11;}
  .large-order-12 {order: 12;}
}


/* Nav */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* Make the grid easier to read. Can delete. */
.row {
  border: 1px solid red;
}
.col {
  border: 1px solid blue;
  padding-top: 1em;
  padding-bottom: 1em;
}
.row .row {
  margin-top: -1em;
  margin-bottom: -1em;
}

Published on 2020-01-18. More articles like this:
- Flexbox
- Web Technologies

Previous <- My Mac’s setup
Next -> On handling breaking changes in React

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content: