CSS Flexbox

flex-direction: row;            /* default → */
flex-direction: row-reverse;    /* ← */
flex-direction: column;         /* ↓ */
flex-direction: column-reverse; /* ↑ */

/* main axis alignment */
justify-content: flex-start;    /* pack left */
justify-content: flex-end;      /* pack right */
justify-content: center;        /* center */
justify-content: space-between; /* edges + gap */
justify-content: space-around;  /* equal margins */
justify-content: space-evenly;  /* equal gaps */

/* cross axis alignment */
align-items: stretch;     /* fill height (default) */
align-items: flex-start;  /* top */
align-items: flex-end;    /* bottom */
align-items: center;      /* middle */
align-items: baseline;    /* text baseline */

flex: 1;           /* grow to fill */
flex: 0 0 250px;   /* fixed width, no grow/shrink */
flex: 2;           /* grow 2x as much */
flex: none;        /* keep natural size */
 
/* longhand: grow shrink basis */
flex: 1 0 auto;

flex-wrap: nowrap; /* default — single line */
flex-wrap: wrap;   /* items wrap to new lines */
 
/* align wrapped lines */
align-content: flex-start;
align-content: center;
align-content: space-between;

gap: 1rem;        /* space between items */
row-gap: 1rem;    /* vertical only */
column-gap: 1rem; /* horizontal only */
 
/* reorder without changing DOM */
order: -1; /* move first */
order: 1;  /* move last */

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

.column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

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

.row {
  display: flex;
  gap: 1rem;
}
 
.row > * {
  flex: 1; /* all children equal width */
}

.row { display: flex; gap: 1rem; }
 
.main    { flex: 2; } /* 2/3 width */
.sidebar { flex: 1; } /* 1/3 width */

.row { display: flex; gap: 1rem; }
 
.sidebar { flex: 0 0 250px; } /* fixed */
.main    { flex: 1; }         /* fills rest */

.wrap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
 
.wrap-grid > * {
  flex: 1 1 200px; /* min 200px, then grow */
}

.input-group {
  display: flex;
  gap: 0.5rem;
}
 
.input-group input {
  flex: 1; /* input stretches */
}
 
.input-group button {
  flex: none; /* button stays sized */
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
 
.tag {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  height: 60px;
}
 
.nav-links {
  display: flex;
  gap: 1rem;
}

.layout {
  display: flex;
  min-height: 100vh;
}
 
.sidebar {
  flex: 0 0 250px;
}
 
.main {
  flex: 1;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
main {
  flex: 1; /* pushes footer to bottom */
}

.media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
 
.media-img {
  flex: 0 0 48px; /* fixed avatar/icon */
}
 
.media-body {
  flex: 1; /* text fills remaining */
}