CSS Flexbox Cheat Sheet

Container Properties

display: flex;
flex-direction: row | column;
justify-content: center | space-between;
align-items: center | flex-start;
flex-wrap: wrap | nowrap;
gap: 10px;

Item Properties

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex: 1 1 auto;
align-self: center;
order: 2;

Common Patterns

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

/* Equal columns */
.item { flex: 1; }

/* Responsive row/column */
.container { display: flex; flex-wrap: wrap; }