CSS Flexbox Layout Guide

The fundamental property that enables flex layout:

.container {
  display: flex;
}

Defines the main axis direction:

.flex-direction-row {
  flex-direction: row; /* Default */
}

.flex-direction-column {
  flex-direction: column;
}

.flex-direction-row-reverse {
  flex-direction: row-reverse;
}

.flex-direction-column-reverse {
  flex-direction: column-reverse;
}

Controls whether flex items wrap onto multiple lines:

.flex-nowrap {
  flex-wrap: nowrap; /* Default */
}

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

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

Aligns flex items along the main axis:

.justify-content-start {
  justify-content: flex-start; /* Default */
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

Aligns flex items along the cross axis:

.align-items-stretch {
  align-items: stretch; /* Default */
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-baseline {
  align-items: baseline;
}

Aligns flex lines within the container when there's extra space in the cross axis:

.align-content-start {
  align-content: flex-start;
  height: 200px;
  flex-wrap: wrap;
}

.align-content-center {
  align-content: center;
  height: 200px;
  flex-wrap: wrap;
}

.align-content-end {
  align-content: flex-end;
  height: 200px;
  flex-wrap: wrap;
}

.align-content-between {
  align-content: space-between;
  height: 200px;
  flex-wrap: wrap;
}

.align-content-around {
  align-content: space-around;
  height: 200px;
  flex-wrap: wrap;
}

Defines the ability for a flex item to grow if necessary:

.flex-grow-0 {
  flex-grow: 0; /* Default */
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-grow-2 {
  flex-grow: 2; /* Grows twice as much as flex-grow: 1 */
}

Defines the ability for a flex item to shrink if necessary:

.flex-shrink-0 {
  flex-shrink: 0;
  width: 150px; /* Won't shrink */
}

.flex-shrink-1 {
  flex-shrink: 1; /* Default */
  width: 150px;
}

.flex-shrink-2 {
  flex-shrink: 2; /* Shrinks twice as much */
  width: 150px;
}

Defines the default size of an element before the remaining space is distributed:

.flex-basis-auto {
  flex-basis: auto; /* Default */
}

.flex-basis-100 {
  flex-basis: 100px;
}

.flex-basis-200 {
  flex-basis: 200px;
}

Shorthand for flex-grow, flex-shrink, and flex-basis:

.item {
  flex: 0 1 auto; /* Default (flex-grow flex-shrink flex-basis) */
}

.item-grow {
  flex: 1; /* Same as flex: 1 1 0% */
}

.item-fixed {
  flex: 0 0 200px; /* Fixed width, won't grow or shrink */
}

.item-flexible {
  flex: 1 0 100px; /* Grow, don't shrink, start at 100px */
}

Controls the order in which flex items appear:

.order-demo .flex-item:nth-child(1) {
  order: 3; /* Default is 0 */
}

.order-demo .flex-item:nth-child(2) {
  order: 1;
}

.order-demo .flex-item:nth-child(3) {
  order: 2;
}

Allows the alignment to be overridden for individual flex items:

.item-start {
  align-self: flex-start;
}

.item-center {
  align-self: center; /* Inherits from container */
}

.item-end {
  align-self: flex-end;
}

.item-stretch {
  align-self: stretch;
  height: auto; /* Allow stretching */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  padding: 15px;
}

.nav-items {
  display: flex;
  gap: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 200px; /* grow shrink basis */
  display: flex;
  flex-direction: column;
}

.card-content {
  flex-grow: 1; /* Takes available space */
}

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.hg-main {
  display: flex;
  flex: 1;
}

.hg-content {
  flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .hg-main {
    flex-direction: column;
  }
}