My Web Training

🎯 Why Flexbox Matters

Flexbox is a modern CSS3 layout model that makes it easier to design flexible, responsive layouts—without relying on outdated techniques like floats or complex positioning. With just a few rules, Flexbox lets you center content, distribute space evenly, and build rows or columns that adapt smoothly to any screen size.

Understanding *why* Flexbox matters helps you use it intentionally. It's the foundation for clean, scalable layouts—perfect for navigation bars, profile grids, or responsive dashboards. Once you learn the basics, it will reshape how you think about web design. To create a flex container, simply apply display: flex; or display: inline-flex; to any parent element in your CSS.

🧱 Understanding the Flex Structure

In Flexbox, the .container (or parent element) holds the flex items (or child elements). These flex items are the immediate children — meaning they are placed directly inside the container in your HTML. Think of it like a family: the container is the parent, and the items are its children.

Here's what that structure looks like:

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

🧰 Set Up a Flex Container

To use Flexbox, you must first turn an element into a flex container. This is done by applying display: flex; (or inline-flex;) to a parent element. This one property is required—none of the other Flexbox properties will work without it.

Once this is set, all direct children of that element become flex items, and you can start applying layout rules to arrange them.

/* display: flex | inline-flex; */
.container {
  display: flex;
}

💡 Tip: Use display: flex; to create a block-level flex container that spans the full width of its parent — ideal for elements like headers, footers, nav menus, and sections. Use display: inline-flex; when you want the container to flow inline with surrounding content (like aligning icons and labels in a single line). Both activate Flexbox, but only affect how the container itself participates in page layout.

🛠️ Common Flexbox Properties

💡 Pro Tip: All of the properties below only work if you've set display: flex; (or inline-flex;) on the flex container. Without that, nothing else in Flexbox will apply.

Set Flex Direction

flex-direction defines the direction of the main axis along which flex items are laid out.

/* flex-direction: row | row-reverse | column | column-reverse; */

.container {
  flex-direction: row; /* default: horizontal main axis */
}

.container {
  flex-direction: column; /* vertical main axis */
}

Allow Items to Wrap

flex-wrap allows items to move onto multiple lines if they don't fit in one row or column.

/* flex-wrap: nowrap | wrap | wrap-reverse; */
.container {
  flex-wrap: wrap;
}

Combine Direction and Wrap

flex-flow is shorthand for setting both flex-direction and flex-wrap.

/* flex-flow: [flex-direction] [flex-wrap]; */
.container {
  flex-flow: row wrap;
}

💡 Tip: A flex-direction of row uses the horizontal (x) axis as the main axis, while column switches it to vertical (y). This matters most for justify-content and align-items, which always operate along the main and cross axes, respectively. Changing the direction flips how these properties behave.

Align Items on the Main Axis

justify-content controls how flex items are positioned along the main axis.

/* justify-content: flex-start | flex-end | center | space-between | space-around; */
.container {
  justify-content: space-between;
}

Align Items on the Cross Axis

align-items aligns items along the cross axis (perpendicular to the main axis).

/* align-items: stretch | flex-start | flex-end | center | baseline; */
.container {
  align-items: center;
}

Align Multiple Rows

align-content aligns multiple rows or columns within a flex container when items wrap.

/* align-content: flex-start | flex-end | center | space-between | space-around; */
.container {
  align-content: space-around;
}

Example: Flexbox Footer with Columns

This example shows how to create a footer with three evenly spaced columns. Flexbox makes it easy to distribute space between items and align content responsively. In the example below, site-footer is the flex container and the 3 nested divs are the flex items.

<footer class="site-footer">
  <div>About Us</div>
  <div>© 2025</div>
  <div>Contact</div>
</footer>

.site-footer {
  display: flex;
  justify-content: space-around;
  background-color: #222;
  color: white;
  padding: 1em;
}

📌 Why Flexbox? Flexbox makes it easy to space out columns evenly without using floats or extra wrappers. It's perfect for simple, horizontal layouts like footers.

🎛️ Control Individual Flex Items

While the flex container defines the overall layout, individual flex items can also control how they grow, shrink, and set their initial size. This is helpful when items need different widths or behaviors across screen sizes.

Flex Grow, Shrink, and Basis

These three properties work together to control an item's flexibility:

flex-grow: number

Defines how much the item grows relative to siblings. 1 grows equally; 2 grows twice as much as 1.

flex-shrink: number

Controls how much the item shrinks when space is tight. 0 means “don't shrink.”

flex-basis: length | auto

Sets the starting size of the item — for example, 200px, 30%, or auto.

.item {
  flex-basis: clamp(200px, 30%, 400px);
}

These three values are often combined using the shorthand property:

/* flex: [flex-grow] [flex-shrink] [flex-basis]; */
.item {
  flex: 1 1 200px;
}

This means:

• 📈 1: the item will grow to fill space if needed
• 📉 1: the item will shrink if necessary
• 📏 200px: the item starts at 200 pixels wide

Change Order

You can rearrange visual order of items without changing the HTML:

/* order: ; */
.item {
  order: 2;
}

Lower values appear first. This is helpful for responsive designs — just be sure the logical reading order (HTML) still makes sense for screen readers.

Override Alignment for One Item

Sometimes a single item needs different alignment than others. Use align-self to override the container's rules:

/* align-self: auto | flex-start | flex-end | center | baseline | stretch; */
.item {
  align-self: flex-end;
}

💡 Tip: The align-self property controls how a single item aligns along the cross axis — the opposite of the main axis set by flex-direction. It's useful for vertical adjustment (in rows) or horizontal adjustment (in columns), but it won't push items apart. To space items apart, use justify-content on the parent for group spacing, or margin-left: auto; on an individual item to push it away from its siblings.

Example Layout

This example creates a responsive three-column layout. Each column is a flex item inside a flex container, and the layout wraps to a new row on smaller screens. The magic is in the flex property, which controls how items grow, shrink, and set their initial size.

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

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

.item {
  flex: 1 1 30%;
}

The flex shorthand is made up of three values:

• flex-grow: 1 — the item can grow to fill space (equally with others)
• flex-shrink: 1 — the item can shrink when space is tight
• flex-basis: 30% — the starting size of the item before growing or shrinking

💡 Think of it like this: Start each item at 30% width. If there's extra space, grow all items equally. If space runs out, shrink all items equally.

Why Control Individual Items?

By default, Flexbox distributes space based on the container's rules. But real-world designs aren't always equal — one section might need more width, or an item might need to stay fixed in size. That's where flex item properties come in:

• 📐 flex-grow lets items expand to fill leftover space
• 📉 flex-shrink prevents an item from getting too small
• 🎯 flex-basis sets a “target” size the browser tries to honor

Once you understand the role of each value, you can use flex to fine-tune your layout — making cards equal height, preventing a nav item from collapsing, or ensuring a column has priority when resizing.

🎨 Pro Tip: When in doubt, try adjusting flex-basis first. If that doesn't give the layout you want, explore flex-grow and flex-shrink next. You'll learn more by experimenting than memorizing!

🧪 Common Uses of Flexbox

Example: Flexbox Navigation with One Link Aligned Right

This example shows a horizontal nav bar where most links align to the left, but one ("Sign In") is aligned to the far right. This layout uses Flexbox at the container level and a special spacing trick for just one item.

<nav class="main-nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="sign-in">Sign In</a>
</nav>

.main-nav {
  display: flex;
  background-color: #333;
  padding: 10px;
}

.main-nav a {
  color: white;
  text-decoration: none;
  margin-right: 1em;
}

.sign-in {
  margin-left: auto;
}

💡 Why Flexbox? Flexbox makes horizontal alignment simple — but to push just one item to the right, we use margin-left: auto;. This tells the browser to take up all remaining space between that item and its siblings.

🤔 Isn't there a Flexbox property for this? Not directly. While Flexbox handles group alignment well, individual spacing often relies on classic CSS tricks like auto margins — which still play nicely with flex layouts.

Example: Basic Flexbox Team Structure

The structure below shows a simple Flexbox container with team members as flex items. Your challenge is to apply your own styles to create a clean, responsive layout.

<section class="team">
    <div class="team-member">
      <h3>Role</h3>
      <img src="..." alt="Team member photo">
      <p>Brief description of the team member.</p>
    </div>
    <div class="team-member">
      <h3>Role</h3>
      <img src="..." alt="Team member photo">
      <p>Brief description of another team member.</p>
    </div>
    <!-- Add more team members as needed -->
  </section>
  

.team {
    display: flex;
    flex-wrap: wrap;
  }
  
  .team-member {
    flex: 1 1 30%;
    min-width: 200px;
  }
  

Other page elements like navbars and footers are built using the same techniques. Try adding your own spacing, colors, and text styles to make this section look polished and professional.

Real-World Example: Team Page Layout

Here's a complete example of a real-world team page layout using Flexbox. This structure demonstrates how to apply Flexbox to navigation, a responsive team section, and a multi-column footer. It's built using the same techniques outlined above.

📚 Additional Resources

• W3Schools: Flexbox Tutorial
• CSS-Tricks: Complete Flexbox Guide
• Flexbox Froggy: Practice Game