Flexbox in CSS - johnverz22/webdev1-lessons GitHub Wiki

Flexbox (Flexible Box Layout) is a CSS layout model designed for aligning and distributing elements inside a container, even when their sizes are unknown.

✅ Makes it easy to create responsive designs.
✅ Aligns items horizontally and vertically without extra CSS tricks.
✅ Reduces the need for floats and positioning.
✅ Works well for navigation bars, cards, forms, and layouts.

Flexbox works with a parent container (flex container) and child items (flex items).

To use Flexbox, set display: flex; on the parent element.

.flex-container {
  display: flex;
  background: lightgray;
  padding: 10px;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

✅ Now, the child elements (.flex-item) automatically align in a row.

Controls whether items are placed in a row (default) or column.

.flex-container {
  display: flex;
  flex-direction: row;  /* default */
}
.flex-container-column {
display: flex;
flex-direction: column;
}

✅ Practice with Flexbox playgrounds like Flexbox Froggy.
✅ Try building layouts using only Flexbox.
✅ Experiment with combining Flexbox and Grid for complex designs.

Would you like interactive exercises for your students?

Flexbox (Flexible Box Layout) is a CSS layout model designed for aligning and distributing elements inside a container, even when their sizes are unknown.

✅ Makes it easy to create responsive designs.
✅ Aligns items horizontally and vertically without extra CSS tricks.
✅ Reduces the need for floats and positioning.
✅ Works well for navigation bars, cards, forms, and layouts.

Flexbox works with a parent container (flex container) and child items (flex items).

To use Flexbox, set display: flex; on the parent element.

.flex-container {
  display: flex;
  background: lightgray;
  padding: 10px;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

✅ Now, the child elements (.flex-item) automatically align in a row.

Controls whether items are placed in a row (default) or column.

.flex-container {
  display: flex;
  flex-direction: row;  /* default */
}

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

Controls how items spread along the main axis.

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

Controls how items align along the cross axis.

.flex-container {
  display: flex;
  align-items: center;
  height: 200px;
  border: 1px solid black;
}

By default, Flexbox keeps items on one line. Use flex-wrap: wrap; to allow wrapping.

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

Instead of adding margins, use gap: to set space between items.

.flex-container {
  display: flex;
  gap: 20px;
}

✅ Works with flex-wrap and makes layouts cleaner.

Controls how much an item grows relative to others.

.flex-item {
  flex-grow: 1;
}

.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }

✅ item1 will be twice as wide as item2.

Defines how much an item shrinks when space is limited.

.flex-item {
  flex-shrink: 0;
}

✅ Use when preventing items from becoming too small.

Defines the default size of an item before it grows or shrinks.

.flex-item {
  flex-basis: 200px;
}

Allows one item to have different vertical alignment.

.flex-item {
  align-self: flex-end;
}

✅ Useful for adjusting specific items in a row.

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  background: #333;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  background: lightgray;
  padding: 20px;
}

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>