If you’ve ever struggled to align elements neatly in CSS—or tried to make a layout look good on both desktop and mobile— Flexbox CSS is you...
If you’ve ever struggled to align elements neatly in CSS—or tried to make a layout look good on both desktop and mobile—Flexbox CSS is your new best friend. Short for "Flexible Box Layout," Flexbox is a layout module in CSS3 that provides an efficient way to distribute space and align items in a container, even when their sizes are dynamic.
In this flexbox tutorial for beginners, we’ll guide you step-by-step through what Flexbox is, why it’s essential for responsive design, and how to use it to build clean, adaptable layouts. By the end of this guide, you’ll be able to use Flexbox confidently to build elements like navigation bars, feature sections, and even a CSS flexbox pricing table example.
Whether you're a self-taught developer, a student, or someone shifting into a front-end career, Flexbox will become one of your most powerful tools in building responsive, user-friendly websites.
Before diving into the code, if you're not yet familiar with CSS fundamentals, check out our CSS basics tutorial on DindinDesign to get up to speed.
Let’s get started by understanding what Flexbox really is and why it matters in modern UI/UX design.
Display: Flex – Making Your Layouts Smarter
The heart of any Flexbox layout begins with one simple line of code:
display: flex;
This declaration transforms a regular HTML element into a CSS flex container, enabling a whole new way of aligning and distributing child elements. Once applied, the element's direct children become flex items—and that's when the magic begins.
What Happens When You Use display: flex
When you apply display: flex to a container, it changes the layout behavior drastically:
-
The child elements (flex items) are aligned along a single axis by default.
-
Items line up horizontally (row direction by default).
-
Default browser rules like display: block or display: inline for children are overridden.
-
The container becomes much more adaptive and responsive by nature.
Here's a basic example:
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
.flex-container {
display: flex;
gap: 1rem; /* Adds space between items */
}
With just these few lines, your three divs will now sit side-by-side, nicely aligned, with consistent spacing. That’s the flexbox basics in action.
Why Flexbox Is a Game-Changer
Before Flexbox, developers relied on float, inline-block, or even position: absolute to create horizontal layouts. These methods often required hacks, clearfixes, and lots of manual tweaking—making maintenance a nightmare.
Flexbox simplifies this by letting you:
-
Control alignment vertically and horizontally
-
Create responsive layouts with minimal effort
-
Avoid weird spacing issues and collapsing margins
Bonus Tip: inline-flex
You can also use display: inline-flex if you want the container to behave like an inline element (taking only as much width as needed). This is useful for inline navigation menus or icon toolbars.
Learn More
If you’re curious about how this works under the hood, check out MDN’s display: flex guide and this excellent CSS-Tricks Flexbox guide.
Next up, we’ll dive into how to control the layout direction using the flex-direction property.
Flex Direction – Controlling the Flow of Flex Items
Now that you’ve turned a container into a CSS flex container using display: flex, the next big concept is understanding flex direction in CSS.
By default, Flexbox arranges items in a row, going from left to right. But what if you want your items to stack vertically, like a sidebar? That’s where the flex-direction property comes in.
.flex-container {
display: flex;
flex-direction: column;
}
Available Values for flex-direction
There are four main values you can use:
-
row (default): Items flow from left to right.
-
row-reverse: Items flow from right to left.
-
column: Items stack top to bottom.
-
column-reverse: Items stack bottom to top.
Main Axis vs Cross Axis
When you set flex-direction, you’re essentially defining the main axis for your layout:
-
If flex-direction: row, the main axis is horizontal.
-
If flex-direction: column, the main axis is vertical.
The cross axis is always perpendicular to the main axis. Understanding this helps when you start using other Flexbox properties like justify-content or align-items.
Why This Matters in Layouts
Let’s say you’re building a sidebar or mobile navigation menu—you’ll want items to flow from top to bottom, so flex-direction: column is the way to go. Need a horizontal nav bar? Stick with the default row.
You can also combine this with other properties like gap or flex-basis to fine-tune spacing and sizing along the main axis.
Try It Yourself
<div class="flex-column">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
</div>
.flex-column {
display: flex;
flex-direction: column;
gap: 10px;
}
Now your boxes will appear stacked vertically, with spacing in between.
For more guidance, see MDN's flex-direction docs.
In the next section, we’ll learn how to align and space items using justify-content and align-items.
Flex Layout – Aligning, Wrapping, and Spacing Made Easy
Creating a responsive CSS layout becomes far easier when you master Flexbox. It takes care of many layout challenges that used to require complex hacks. Whether you’re building navigation menus, card grids, or pricing tables, web layout with Flexbox is cleaner and more adaptable.
Controlling Spacing with gap
The gap property makes it easy to add consistent spacing between flex items without needing margin hacks:
.flex-container {
display: flex;
gap: 1rem;
}
This works both for horizontal and vertical directions, depending on your flex-direction.
Aligning Items with justify-content
To align items along the main axis, use justify-content:
.flex-container {
display: flex;
justify-content: space-between;
}
Available values include:
-
flex-start
-
flex-end
-
center
-
space-between
-
space-around
-
space-evenly
This lets you create elegant, adaptive spacing between items—great for responsive design on business websites.
Aligning Items on the Cross Axis with align-items
Use align-items to control alignment along the cross axis (vertical by default):
.flex-container {
display: flex;
align-items: center;
}
This is especially useful when vertically centering elements, a task that used to be tricky in older CSS.
Wrapping with flex-wrap
By default, Flexbox doesn’t wrap items to the next line. You can change this behavior with flex-wrap:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Now your layout will gracefully wrap onto new lines on smaller screens—perfect for a responsive CSS layout.
Bonus: Rearranging Items with order
Flexbox lets you change the visual order of items without modifying the HTML:
.item-special {
order: 3;
}
This gives you design freedom without sacrificing semantic structure.
Next, we’ll wrap up with some best practices and a motivational call to keep building and experimenting with Flexbox.
Flex Sizing – How Flex Items Grow, Shrink, and Size Themselves
One of the most powerful features of Flexbox is its ability to control how items grow, shrink, and size themselves inside a container. This is the essence of a truly responsive CSS layout.
Understanding flex sizing in CSS means mastering three key properties:
1. flex-grow
This property tells an item how much it can grow relative to its siblings when there’s extra space in the container.
.item {
flex-grow: 1;
}
All items with flex-grow: 1 will divide the extra space equally. If one item has flex-grow: 2, it gets twice as much extra space as one with flex-grow: 1.
2. flex-shrink
This controls how much an item shrinks relative to others when space is limited.
.item {
flex-shrink: 1;
}
If you set flex-shrink: 0, the item won’t shrink at all—even if the layout overflows. That can be handy for sticky UI elements.
3. flex-basis
This sets the initial size of the item before growing or shrinking happens. It behaves like width (or height, depending on direction), but it’s more flexible.
.item {
flex-basis: 200px;
}
It acts as a starting point for Flexbox to calculate how to distribute space.
Putting It All Together: The flex Shorthand
You can combine all three properties in one line:
.item {
flex: 1 1 200px; /* grow shrink basis */
}
Or use the most common pattern:
.item {
flex: 1; /* Equivalent to 1 1 0 */
}
This shorthand is especially helpful when you want items to grow and shrink equally.
Common Flex Sizing Patterns
-
Equal-width cards: flex: 1 on all items
-
Sidebar and content: flex: 1 on sidebar, flex: 2 on content
-
Fixed-size button: flex-shrink: 0; flex-basis: 100px;
A Note on Width and Flex-Basis
If both width and flex-basis are set, ``** wins**. Avoid setting both unless you know what you’re doing.
Learn More
Explore MDN’s flex documentation for the full spec, or revisit our internal tutorial on Flexbox spacing and alignment for more real-world examples.
Next, we’ll wrap things up with some final tips and encouragement for your CSS journey!
Mini Project: Pricing Table with Flexbox
Let’s put everything you’ve learned into action with a hands-on mini project! In this section, we’ll build a modern, responsive CSS pricing table using Flexbox.
This kind of flexbox UI component is common in business websites, SaaS landing pages, and product pricing interfaces—so it’s a great high-impact skill to learn. You’ll walk away with a layout that looks clean, works beautifully on all screen sizes, and can be adapted into real-world projects.
Step 1: Basic HTML Structure
Let’s assume you have a simple HTML setup with three pricing cards:
<div class="pricing-container">
<div class="pricing-plan">
<h2 class="plan-title">Basic</h2>
<p class="plan-price">$9/mo</p>
<ul class="plan-features">
<li>1 Website</li>
<li>Basic Support</li>
</ul>
<button>Select</button>
</div>
<!-- Repeat for other plans -->
</div>
Step 2: Layout with Flexbox
Apply Flexbox to the container:
.pricing-container {
display: flex;
justify-content: center;
gap: 2rem;
padding: 2rem;
}
.pricing-plan {
flex: 1;
max-width: 400px;
background-color: #f4f4f4;
border-radius: 8px;
padding: 1.5rem;
text-align: center;
}
Now all your pricing plans sit side by side and scale evenly.
Step 3: Make It Responsive
Use a media query to stack the cards vertically on smaller screens:
@media (max-width: 900px) {
.pricing-container {
flex-direction: column;
align-items: center;
}
}
This is how you create a responsive pricing table layout without needing complex CSS.
Step 4: Styling Details
Add finishing touches like font sizes, colors, and spacing:
.plan-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.plan-price {
font-size: 2rem;
color: #ff6600;
margin-bottom: 1rem;
}
.plan-features {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
}
button {
background-color: #ff6600;
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 5px;
cursor: pointer;
}
Want a refresher on media queries? Read CSS Media Queries Guide from MDN.
Real-World Use Cases
A well-designed pricing table like this is essential for landing pages, online service platforms, and SaaS products. With Flexbox, you can:
-
Quickly adapt designs for different screen sizes
-
Create UI components that are easy to maintain
-
Avoid float-based or grid-heavy code for simple use cases
Want to dive deeper into layout techniques? Check out our guide to HTML & CSS for Landing Pages.
Next, we’ll close with some parting tips and motivation to keep learning CSS!
Tips on Building a Programming Habit
Well done for making it this far! Completing a full Flexbox tutorial is no small feat—you’ve earned a new belt in your front-end journey. Whether you’re aiming for a tech career or building your own websites, keeping a daily coding habit is the key to lasting progress.
Tag Your Coding to an Existing Habit
One simple way to build consistency is to attach learning CSS consistently to a habit you already have. For example:
-
After your morning coffee, spend 30 minutes practicing CSS
-
After lunch, review one layout concept
-
Before bed, tweak your portfolio or revisit a Flexbox section
By tagging your coding time onto something you already do, it becomes easier to stick with.
Keep It Fun and Flexible
Not every day has to be intense. Some days, just reading an article or watching a short video counts. Other days, you’ll build mini-projects like our CSS pricing table. The important part is to keep moving forward—even in small steps.
Track Your Progress
Use a notebook, a habit tracker app, or even a calendar to mark your coding streaks. Seeing your effort add up is incredibly motivating!
Pro tip: Write blog posts or share mini projects on platforms like CodePen or GitHub to document your learning. You’ll thank yourself later.
Stay Connected and Keep Exploring
If you enjoyed this guide, there’s plenty more waiting for you:
Final Words
Remember: no one becomes a front-end developer overnight. But with consistency, curiosity, and just 30 minutes a day, you’ll be amazed how far you go.
You’ve got this. Keep going. We’re cheering you on.
