Flexbox Intro
Posted on September 3, 2020 in CSS by Matt Jennings

  • Features flex-containers (row or parent) and flex-items (cells or children). Both are required to work.
  • Excels at vertical centering and equal heights.
  • Very easy to reorder boxes.
  • Major disadvantages:
    • Works in one dimension only (rows).
    • Browser support and syntax is challenging.
    • Prefixing may still be required depending on browser support desired.

      Example code:

      ul {
         display: -webkit-flex; /* Chrome, Safari */
         display: -ms-flexbox; /* IE10 */
         display: flex;

Leave a Reply

To Top ↑