/* Basic flex container -->
.container {
  display: flex;
  /* Now all direct children are flex items */
}

.container > * {
  /* Direct children only - nested elements are not flex items */
}

<!-- Flex vs block vs inline -->

.block {
  display: block;  /* full width, stacked vertically -->
}

.inline {
  display: inline;  /* only takes needed width, can't set width/height -->
}

.inline-block {
  display: inline-block;  /* inline but can set width/height -->
}

.flex {
  display: flex;  /* arranges children flexibly, can set width/height -->
}

/* Flex has two axes: main and cross -->

/* By default: flex-direction: row (horizontal main axis) -->
.container {
  display: flex;
  flex-direction: row;
}

<!-- Items arranged along horizontal main axis -->
<!-- [Item1] [Item2] [Item3] -->

/* Main axis properties: justify-content -->
.container {
  display: flex;
  justify-content: center;  /* centers along main axis -->
}

/* Cross axis properties: align-items -->
.container {
  display: flex;
  height: 200px;
  align-items: center;  /* centers along cross axis (vertical) -->
}

<!-- With flex-direction: column (vertical main axis) -->
.container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

<!-- justify-content now works vertically -->
<!-- align-items now works horizontally -->

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centers vertically -->
  align-items: center;     /* centers horizontally -->
  height: 400px;
  width: 400px;
}

/* Container width and height affect flex items -->

/* Flex items fill height by default (with align-items: stretch) -->
.container {
  display: flex;
  height: 200px;
}

.item {
  /* Stretches to 200px height by default */
}

<!-- Same height even without explicit height on items -->

/* Width distribution depends on flex properties -->
.container {
  display: flex;
  width: 600px;
}

.item {
  flex: 1;  /* each item takes 1/3 (200px) -->
}

<!-- [200px] [200px] [200px] -->

/* Container can be full width or specific size -->
.container-full {
  display: flex;
  width: 100%;
}

.container-fixed {
  display: flex;
  width: 800px;
}

.container-max {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;  /* center the container -->
}

<!-- Centered layout -->
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 400px;
}

<!-- Item centered both ways -->

/* Horizontal row with spacing -->
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
}

<!-- [Item] [20px gap] [Item] [20px gap] [Item] -->

/* Wrapping grid -->
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.item {
  flex: 0 0 200px;  /* fixed width -->
}

<!-- Items wrap to next line when needed -->

/* Vertical column -->
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100vh;
}

<!-- [Item] [gap] [Item] [gap] [Item] stacked vertically -->

/* Full-height layout -->
.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

.header {
  flex: 0 0 60px;  /* fixed height -->
}

.main {
  flex: 1;  /* takes remaining space -->
  overflow-y: auto;
}

.footer {
  flex: 0 0 40px;  /* fixed height -->
}