Flexbox

.container {
  display: flex;         /* block-level flex container */
  display: inline-flex;  /* inline-level flex container */
}
/* Direct children become flex items */

/* flex-direction */
flex-direction: row;            /* default — left to right */
flex-direction: row-reverse;    /* right to left */
flex-direction: column;         /* top to bottom */
flex-direction: column-reverse; /* bottom to top */

/* flex-wrap */
flex-wrap: nowrap;       /* default — all on one line */
flex-wrap: wrap;         /* wrap to next line */
flex-wrap: wrap-reverse; /* wrap to previous line */

/* shorthand */
flex-flow: row wrap;
flex-flow: column nowrap;

justify-content: flex-start;    /* default — items at start */
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* gaps between items */
justify-content: space-around;  /* equal space around items */
justify-content: space-evenly;  /* equal space between and edges */
justify-content: start;
justify-content: end;
justify-content: left;
justify-content: right;
justify-content: stretch;       /* only in multi-line containers */

align-items: stretch;      /* default — fill cross-axis size */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
align-items: start;
align-items: end;
align-items: self-start;
align-items: self-end;

align-content: stretch;       /* default */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: start;
align-content: end;

/* place-content: align-content justify-content */
place-content: center;             /* both axes centered */
place-content: space-between center;

/* place-items: align-items justify-items */
place-items: center;
place-items: start end;

gap: 1rem;               /* row-gap and column-gap */
gap: 1rem 2rem;          /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;

flex-grow: 0;   /* default — do not grow */
flex-grow: 1;   /* grow to fill available space */
flex-grow: 2;   /* take twice as much space as flex-grow: 1 siblings */

flex-shrink: 1;  /* default — shrink proportionally */
flex-shrink: 0;  /* do not shrink */
flex-shrink: 2;  /* shrink twice as fast */

flex-basis: auto;   /* default — use width/height, or content size */
flex-basis: 0;      /* ignore content size */
flex-basis: 200px;
flex-basis: 25%;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* flex: grow shrink basis */
flex: 0 1 auto;   /* default — same as initial */
flex: 1;          /* flex: 1 1 0 — grow and shrink, ignore content size */
flex: auto;       /* flex: 1 1 auto — grow and shrink, respect content size */
flex: none;       /* flex: 0 0 auto — rigid, no grow/shrink */
flex: 0 0 200px;  /* fixed-width column */
flex: 2 1 0;      /* twice the grow factor */

align-self: auto;          /* inherits container's align-items */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;

/* Items rendered in ascending order value */
.first  { order: -1; }
.normal { order: 0; }   /* default */
.last   { order: 1; }

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

.row {
  display: flex;
  gap: 1rem;
}
.col { flex: 1; }

.layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.sidebar { flex: 0 0 260px; }
.main    { flex: 1; }

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 240px; /* min ~240px, grow to fill */
}

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-spacer { flex: 1; } /* push right items to end */

.flex-item {
  min-width: 0;    /* allow shrinking below content size */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}