Blog

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;
    }