ā¤ Like
šŸ”– Save
šŸ”— Share
@thedevspaceio
@thedevspaceio

CSS Flexbox Cheatsheet

@thedevspaceio

šŸ§© CSS Flexbox Cheatsheet

Flexbox is a one-dimensional layout system. It solves common centering, spacing, and ordering problems with a small set of container and item properties.

āœ… Basic flex properties āœ… display āœ… flex-direction āœ… flex-wrap āœ… flex-flow āœ… gap / row-gap / column-gap āœ… order āœ… flex-grow āœ… flex-shrink āœ… flex-basis āœ… flex

#css #flexbox #layout #frontend #webdev #responsive #alignment #spacing #csslayout #uidesign

Basic flex properties

CSS Flexbox is a one-dimensional layout system.

PropertyNotes
displayflex or inline-flex establishes a flex formatting context.
flex-directionMain axis direction: row, row-reverse, column, column-reverse.
flex-wrapWhether items wrap: nowrap, wrap, wrap-reverse.
flex-flowShorthand for flex-direction and flex-wrap.
gapSpacing between flex items.
row-gapSpacing between rows when wrapped.
column-gapSpacing between columns.
orderControls visual order of a flex item.
flex-growHow much an item grows relative to others.
flex-shrinkHow much an item shrinks relative to others.
flex-basisInitial size of an item before grow/shrink.
flexShorthand for flex-grow, flex-shrink, and flex-basis.
align-selfOverrides cross-axis alignment for a single item.

display

Turns an element into a flex container.

css
.container {
  display: flex; /* or inline-flex */
}

flex-direction

Sets the main axis direction.

css
.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

row

1

2

3

row-reverse

1

2

3

column

1

2

3

column-reverse

1

2

3

flex-wrap

Controls whether items wrap onto multiple lines.

css
.container {
  display: flex;
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

wrap

1

2

3

4

nowrap

1

2

3

4

wrap-reverse

1

2

3

4

flex-flow

Shorthand for flex-direction and flex-wrap.

css
.container {
  display: flex;
  flex-flow: row wrap;
}

gap / row-gap / column-gap

Spacing between flex items.

css
.container {
  display: flex;
  gap: 16px;
}

1

2

3

css
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 24px;
}

1

2

3

4

order

Changes the visual order of a flex item.

css
.container {
  display: flex;
  gap: 16px;
}
 
.item-first {
  order: -1; /* default is 0 */
}

1

2 (first)

3

flex-grow

Controls how much an item grows relative to others.

css
.item-grow {
  flex-grow: 2; /* default is 0 */
}

grow 2

flex-shrink

Controls how much an item shrinks relative to others.

css
.item-shrink {
  flex-shrink: 0; /* default is 1 */
}

shrink 2

flex-basis

Sets the initial size of an item before grow/shrink.

css
.item-basis {
  flex-basis: 200px; /* default is auto */
}

80px

160px

320px

flex

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

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

Full-Stack AI Developer Roadmap

From HTML & CSS to working with AI models, all in one structured roadmap.

@thedevspaceio
www.thedevspace.io