CSS Flexbox layout system fundamentals

/* Basic flexbox container */
.flex-container {
  display: flex;
  /* flex-direction: row | row-reverse | column | column-reverse */
  flex-direction: row; /* default */

  /* justify-content: aligns items on main axis */
  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  justify-content: space-between;

  /* align-items: aligns items on cross axis */
  /* stretch | flex-start | flex-end | center | baseline */
  align-items: center;

  /* flex-wrap: allows wrapping */
  /* nowrap | wrap | wrap-reverse */
  flex-wrap: wrap;

  /* gap: spacing between items (modern browsers) */
  gap: 1rem;

  /* align-content: aligns wrapped lines */
  /* flex-start | flex-end | center | space-between | space-around | stretch */
  align-content: flex-start;
}

/* Flex items */
.flex-item {
  /* flex: flex-grow flex-shrink flex-basis */
  flex: 1 1 auto; /* grow, shrink, basis */

  /* Or individually */
  flex-grow: 1;     /* grow to fill space */
  flex-shrink: 1;   /* shrink if needed */
  flex-basis: auto; /* initial size */

  /* align-self: override align-items for this item */
  /* auto | flex-start | flex-end | center | baseline | stretch */
  align-self: flex-start;

  /* order: change visual order */
  order: 0; /* default, lower numbers come first */
}

/* Common flexbox patterns */

/* 1. Perfect centering */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 2. Navbar with logo left, menu right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.navbar-menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

/* 3. Card grid with wrapping */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* min width 300px, can grow */
  min-width: 0; /* fix overflow issues */
}

/* 4. Sidebar layout */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px; /* fixed width, don't grow or shrink */
}

.main-content {
  flex: 1; /* take remaining space */
  padding: 2rem;
}

/* 5. Equal height columns */
.columns {
  display: flex;
  gap: 2rem;
}

.column {
  flex: 1; /* equal width */
  /* All columns automatically same height! */
}

/* 6. Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1; /* push footer to bottom */
}

footer {
  flex-shrink: 0;
}

/* 7. Form with aligned labels and inputs */
.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-row label {
  flex: 0 0 150px; /* fixed width labels */
  text-align: right;
}

.form-row input {
  flex: 1; /* flexible input width */
}

/* 8. Media object pattern */
.media {
  display: flex;
  gap: 1rem;
}

.media-image {
  flex-shrink: 0; /* don't shrink image */
}

.media-content {
  flex: 1; /* flexible content */
}

/* 9. Responsive column stacking */
.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.responsive-flex > * {
  flex: 1 1 300px; /* wrap at 300px */
}

/* Stack on mobile */
@media (max-width: 768px) {
  .responsive-flex {
    flex-direction: column;
  }
}

/* 10. Split button group */
.button-group {
  display: flex;
}

.button-group button {
  flex: 1; /* equal width buttons */
}

.button-group button:not(:last-child) {
  border-right: none;
}

/* Auto-margin trick for spacing */
.flex-spacer {
  display: flex;
  align-items: center;
}

.flex-spacer .push-right {
  margin-left: auto; /* push to right */
}

/* Nested flexbox */
.outer-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inner-flex {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Flexbox with negative margins (overlap items) */
.overlap-flex {
  display: flex;
  margin-left: -0.5rem;
}

.overlap-flex > * {
  margin-left: 0.5rem;
}

/* Responsive utilities */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}