CSS Flexbox

1) Flex Container & Axes

.container {
  display: flex;             /* becomes a flex container */
  flex-direction: row;       /* main axis = horizontal */
  gap: 10px;                 /* space between items */
}

Main axis: left → right (row). Cross axis: top ↕ bottom.

2) Direction, Wrap & Gap

.row      { flex-direction: row; }
.column   { flex-direction: column; }
.wrap     { flex-wrap: wrap; }
.nowrap   { flex-wrap: nowrap; }
.with-gap { gap: 12px; }

3) Alignment: justify-content & align-items

.centered{
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}

align-content controls multi-row alignment when wrapping.

4) Sizing: flex-grow, flex-shrink, flex-basis

.item-1 { flex: 1 1 120px; } /* grow 1, shrink 1, base 120px */
.item-2 { flex: 2 1 120px; } /* twice the free space of item-1 */
.item-3 { flex: 0 0 120px; } /* fixed width */

5) Per-Item Alignment with align-self

.i1 { align-self: flex-start; }
.i2 { align-self: center; }
.i3 { align-self: flex-end; }

6) Reordering with order

.a { order: 3; }
.b { order: 1; }
.c { order: 2; }

Use order cautiously for accessibility: DOM order still matters for screen readers & keyboard tabbing.

7) Common Layout Patterns

a) App/Website Nav Bar

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

b) Responsive Card Grid (wrap + basis)

.cards  { display: flex; flex-wrap: wrap; gap: 12px; }
.card   { flex: 1 1 220px; }

c) Sidebar + Main Content

.layout{ display: flex; gap: 12px; }
.layout .side{ flex: 0 0 200px; }
.layout .main{ flex: 1 1 auto; }

d) Equal Height Columns

.cols{ display: flex; gap: 12px; }
.cols > div{ flex: 1; }

8) Debug Helpers

/* temporary borders/backgrounds help visualize alignment */
.debug { outline: 1px dashed #ccc; }