flex Shorthand Deep Dive — CSS

flex-flow & container shorthands

The flex-flow shorthand combines flex-direction and flex-wrap in one declaration. Other container shorthands like place-items combine alignment properties. These shorthands reduce code and improve readability.

flex-flow shorthand

CSS

/* flex-flow: direction wrap -->
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Shorthand version -->
.container {
  display: flex;
  flex-flow: row wrap;
}

/* Different combinations -->
.row-nowrap {
  flex-flow: row nowrap;  /* default -->
}

.row-wrap {
  flex-flow: row wrap;    /* wrap right -->
}

.column-nowrap {
  flex-flow: column nowrap;
}

.column-wrap {
  flex-flow: column wrap;  /* wrap down -->
}

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

Alignment shorthands

CSS

/* place-items: align-items align-self -->
.center {
  display: flex;
  place-items: center;  /* centers both axes -->
}

/* Equivalent to -->
.center {
  align-items: center;
  justify-items: center;  /* flex doesn't use justify-items -->
}

/* Different values -->
.start {
  place-items: start;  /* flex-start both axes -->
}

.end {
  place-items: end;    /* flex-end both axes -->
}

.center-start {
  place-items: center start;  /* center vertical, start horizontal -->
}

/* place-content: justify-content align-content -->
.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  place-content: center center;
}

/* Equivalent to -->
.container {
  justify-content: center;
  align-content: center;
}

Complete flex container shorthand examples

CSS

<!-- Minimal flex setup -->
.flex {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  place-items: center;
}

<!-- Equivalent longer version -->
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

<!-- Column flex centered -->
.column-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

<!-- Or with shorthands -->
.column-centered {
  display: flex;
  flex-direction: column;
  place-items: center;
  gap: 15px;
}

<!-- Row with wrapping and spacing -->
.row-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

Flex item shorthands

CSS

/* flex: grow shrink basis -->
.item {
  flex: 1 1 200px;  /* grow shrink basis -->
}

/* Common patterns -->
.grow {
  flex: 1;  /* 1 1 0% -->
}

.no-grow {
  flex: 0;  /* 0 1 auto -->
}

.fixed {
  flex: none;  /* 0 0 auto -->
}

.with-min {
  flex: 1 0 200px;  /* grow, don't shrink below 200px -->
}

/* Avoid ambiguity with explicit values -->
.clear {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
  /* More explicit, less confusing -->
}

When to use shorthands

Situation	Use shorthand?	Example
Setting both direction and wrap	Yes	flex-flow: row wrap
Centering both axes	Yes	place-items: center
Quick flex-item setup	Yes	flex: 1 1 200px
Complex alignment mix	No	Use longhand for clarity
Debugging issues	No	Expand shorthands for clarity

CSS

<!-- Shorthands make simple layouts concise -->
.navbar {
  display: flex;
  flex-flow: row nowrap;
  place-items: center;
  justify-content: space-between;
  gap: 20px;
}

<!-- But can get confusing with many properties -->
.complex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  align-content: center;
  gap: 15px;
}

<!-- Better to expand shorthands for clarity -->

<!-- Good: readable shorthands -->
.flex {
  display: flex;
  flex-flow: row wrap;
  place-items: center;
  gap: 20px;
}

<!-- Also good: explicit for clarity -->
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

Note

Shorthands are great for readability when they're clear. `flex-flow` and `place-items` are particularly useful. Use them when they make code clearer, not just shorter.

Troubleshooting flex issues: [flex debugging & common issues](/css/flex-debugging).