W3.CSS Flex Items

Welcome to The Coding College, where we simplify modern web development for coders of all levels! In this post, you’ll learn how to use W3.CSS Flex Items to create powerful, responsive layouts using Flexbox principles — all while maintaining clean and efficient code.

What Are Flex Items?

In Flexbox, any element that is a child of a flex container becomes a flex item. These items can:

  • Grow or shrink to fit the container
  • Be aligned individually or as a group
  • Be reordered without changing the HTML

W3.CSS doesn’t have a dedicated .w3-flex-item class, but it works seamlessly with native CSS Flexbox when you combine it with utility classes like w3-col, w3-padding, and custom CSS.

Basic Setup: Flex Container + Flex Items

<div style="display: flex;" class="w3-container w3-light-grey">
  <div class="w3-red w3-padding">Item 1</div>
  <div class="w3-blue w3-padding">Item 2</div>
  <div class="w3-green w3-padding">Item 3</div>
</div>

This setup creates three flex items in a row, equally spaced within the container.

Controlling Flex Item Size

flex-grow, flex-shrink, and flex-basis

You can apply these via custom styles:

<style>
.flex-item {
  flex: 1; /* shorthand for grow, shrink, basis */
}
</style>

<div style="display: flex;" class="w3-container">
  <div class="w3-red w3-padding flex-item">Grow 1</div>
  <div class="w3-blue w3-padding flex-item">Grow 2</div>
  <div class="w3-green w3-padding flex-item">Grow 3</div>
</div>

All items take equal space and expand as the screen size increases.

Example: Unequal Flex Items

<style>
.flex-2 { flex: 2; }
.flex-1 { flex: 1; }
</style>

<div style="display: flex;" class="w3-container w3-border">
  <div class="w3-light-grey w3-padding flex-2">Item A (2x size)</div>
  <div class="w3-teal w3-padding flex-1">Item B</div>
</div>

Here, Item A takes twice the space of Item B.

Wrapping Flex Items

If you want your items to wrap on smaller screens, use flex-wrap: wrap.

<div class="w3-container" style="display: flex; flex-wrap: wrap;">
  <div class="w3-red w3-padding" style="flex: 1 0 200px;">Box 1</div>
  <div class="w3-blue w3-padding" style="flex: 1 0 200px;">Box 2</div>
  <div class="w3-green w3-padding" style="flex: 1 0 200px;">Box 3</div>
</div>

This keeps your layout mobile-friendly and responsive.

Aligning Flex Items Individually

You can align individual items with align-self.

<style>
.align-end {
  align-self: flex-end;
}
</style>

<div style="display: flex; height: 200px;" class="w3-container w3-pale-blue">
  <div class="w3-red w3-padding">Top</div>
  <div class="w3-green w3-padding align-end">Bottom</div>
</div>

Here, the second item aligns to the bottom of the container.

Use Case: Cards Layout

<div class="w3-row-padding w3-container" style="display: flex; flex-wrap: wrap;">
  <div class="w3-third w3-card w3-padding w3-margin">Card 1</div>
  <div class="w3-third w3-card w3-padding w3-margin">Card 2</div>
  <div class="w3-third w3-card w3-padding w3-margin">Card 3</div>
</div>

Perfect for dashboards, portfolios, or product listings.

Pro Tip: Combine W3.CSS & Flexbox Responsively

W3.CSS columns (w3-half, w3-third, w3-quarter) can act as flex items, especially within w3-row or any display: flex container.

This means you get built-in responsiveness, with the flexibility of Flexbox!

Why Use Flex Items in W3.CSS?

  • Mobile-first layout structure
  • Cleaner code compared to floats or grid hacks
  • Easy alignment, spacing, and ordering
  • Better accessibility and performance

Learn More

Explore more about Flexbox, W3.CSS, and building full responsive websites using our free tutorials and project guides on The Coding College.

Ready to go from “just flexing” to flex-mastering?
Let’s build smarter, faster, and cleaner websites — together.

Leave a Comment