CSS Flexbox: The Complete Visual Guide

CSS Flexbox: The Complete Visual Guide | DevPrep

.container {
  flex-direction: row;            /* → default, left to right */
  flex-direction: row-reverse;    /* ← right to left */
  flex-direction: column;         /* ↓ top to bottom */
  flex-direction: column-reverse; /* ↑ bottom to top */
}

.container {
  justify-content: flex-start;    /* |■ ■ ■      | */
  justify-content: center;        /* |   ■ ■ ■   | */
  justify-content: flex-end;      /* |      ■ ■ ■| */
  justify-content: space-between; /* |■    ■    ■| */
  justify-content: space-around;  /* | ■   ■   ■ | */
  justify-content: space-evenly;  /* |  ■  ■  ■  | */
}

.container {
  align-items: stretch;    /* Items fill container height (default) */
  align-items: flex-start; /* Items at top */
  align-items: center;     /* Items centered vertically */
  align-items: flex-end;   /* Items at bottom */
  align-items: baseline;   /* Items aligned by text baseline */
}

.item {
  flex: 1;       /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 200px; /* Don't grow, don't shrink, 200px wide */
  flex: 2 1 auto;  /* Grow 2x, can shrink, natural width */
}

/* Centering */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

/* Holy grail layout */
.layout {
  display: flex;
}
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }
.aside { flex: 0 0 200px; }

CSS Flexbox: The Complete Visual Guide

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Container Properties

display: flex

flex-direction

justify-content (Main Axis)

align-items (Cross Axis)

flex-wrap

Item Properties

flex shorthand

align-self

order

Common Patterns

Gotchas