Flexbox

display: flex;
flex-direction: row | column | row-reverse | column-reverse;

.navbar {
  display: flex;
  flex-direction: row;
}

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

Note Setting display: flex turns direct children into flex items. The default direction is row (horizontal). Items shrink to fit by default but do not wrap.

justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;

/* Push items to opposite ends */
.header {
  display: flex;
  justify-content: space-between;
}

/* Center items horizontally */
.hero {
  display: flex;
  justify-content: center;
}

Note justify-content distributes items along the main axis (horizontal in row, vertical in column). space-between puts the first and last items at the edges. space-evenly distributes equal space around every item including edges.

align-items: stretch | flex-start | center | flex-end | baseline;

/* Vertically center items in a row */
.toolbar {
  display: flex;
  align-items: center;
  height: 64px;
}

/* Align text baselines across different font sizes */
.price-row {
  display: flex;
  align-items: baseline;
}

Note align-items controls alignment on the cross axis (vertical in row, horizontal in column). The default is stretch, which makes items fill the container height. Use baseline to align items by their text baseline regardless of size.

flex-wrap: nowrap | wrap | wrap-reverse;

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  background: #e5e7eb;
  border-radius: 16px;
}

Note By default, flex items squeeze onto one line (nowrap). With wrap, items flow to the next line when they run out of space. This is essential for responsive layouts without media queries.

gap: value;
row-gap: value;
column-gap: value;

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.button-group {
  display: flex;
  gap: 8px;
}

Note gap creates space between flex items without adding margins to outer edges. It works in both flexbox and grid. This eliminates the need for margin hacks on the first or last child.

flex: grow shrink basis;
flex-grow: number;
flex-shrink: number;
flex-basis: size;

.sidebar {
  flex: 0 0 280px; /* fixed width, no grow or shrink */
}

.main-content {
  flex: 1; /* grow to fill remaining space */
}

.equal-columns > * {
  flex: 1 1 0%; /* equal width columns */
}

Note flex: 1 is shorthand for flex: 1 1 0%, meaning the item can grow and shrink and starts from zero base size. flex-basis sets the initial size before growing/shrinking. Using 0% basis makes items share space equally.

align-self: auto | flex-start | center | flex-end | stretch | baseline;

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

.push-bottom {
  align-self: flex-end;
}

.centered-item {
  align-self: center;
}

Note align-self overrides the container's align-items value for a single flex item. It applies on the cross axis. There is no justify-self in flexbox since the main axis is controlled by the container.

order: integer;

.sidebar {
  order: -1; /* moves before items with default order 0 */
}

/* Reorder on mobile */
@media (max-width: 768px) {
  .hero-image { order: -1; }
  .hero-text  { order: 0; }
}

Note The default order is 0. Lower values appear first. This changes visual order only, not tab order or screen reader order, so use sparingly to avoid accessibility confusion.

display: flex;
justify-content: center;
align-items: center;

/* Center a single element both horizontally and vertically */
.page-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Shorter alternative using place properties */
.quick-center {
  display: flex;
  place-content: center;
  place-items: center;
}

Note This three-line pattern is the simplest way to center anything vertically and horizontally. Add min-height: 100vh to center within the full viewport.

margin-left: auto; /* or margin-right: auto */

/* Push the last item to the far right */
.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar .user-menu {
  margin-left: auto;
}

Note Auto margins in flexbox consume all available space in that direction. This pushes elements apart without justify-content: space-between, which is useful when you need only one item pushed to the end.