Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Take A QuizChallenge yourself and boost your learning! Start the quiz now to earn credits.
Take A QuizUnlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Take A Quiz
🔄 Introduction: Layout
Freedom with Wrapping and Reordering
As screen sizes vary, our web layouts must be flexible
enough to adapt and reposition elements to maintain usability and
aesthetic consistency. In Flexbox, you gain advanced control over how items
behave responsively by enabling wrapping, customizing order, and reordering
items without changing HTML.
This chapter covers:
By the end of this chapter, you’ll be equipped to build
flexible, content-adaptive layouts that automatically adjust and reflow
based on screen size and content.
🔧 1. Wrapping Flex Items
with flex-wrap
By default, Flexbox tries to fit all items on a single
line, even if they overflow the container. To allow items to wrap onto
multiple lines, you must enable the flex-wrap property.
🔹 Syntax:
css
.container
{
display: flex;
flex-wrap: wrap;
}
🔹 Example:
html
<div
class="container">
<div
class="item">A</div>
<div
class="item">B</div>
<div
class="item">C</div>
<div
class="item">D</div>
</div>
css
.container
{
display: flex;
flex-wrap: wrap;
width: 300px;
}
.item
{
flex: 0 0 150px;
}
Result: Items wrap to the next line once space runs out.
🔄 2. flex-wrap Values
Explained
Value |
Description |
nowrap |
Default. All items on
one line (overflow may occur) |
wrap |
Items wrap
onto multiple lines from top to bottom |
wrap-reverse |
Items wrap from bottom
to top |
🧠 Useful when:
🧪 Side-by-Side
Comparison:
css
/*
No wrapping - items overflow */
.container
{
display: flex;
flex-wrap: nowrap;
}
/*
Wrapping allowed */
.container
{
display: flex;
flex-wrap: wrap;
}
📐 3. Controlling Item
Order with order
One of the powerful features of Flexbox is the ability to reorder
items visually without rearranging the actual HTML. The order property
allows you to assign a numeric order to each item.
🔹 Syntax:
css
.item
{
order: [number];
}
🔸 Default value:
css
order:
0;
Items with lower order values appear first. You can
use negative values too.
🔹 Example:
html
<div
class="container">
<div class="item"
style="order: 3;">Third</div>
<div class="item"
style="order: 1;">First</div>
<div class="item"
style="order: 2;">Second</div>
</div>
Visually, the output will be: First → Second → Third
🎯 4. Responsive
Reordering with Media Queries
You can combine order with media queries to create responsive
layouts that adapt to device size.
🔸 Use Case: Mobile-First
Design
html
<div
class="layout">
<header class="box
header">Header</header>
<nav class="box
nav">Navigation</nav>
<main class="box main">Main
Content</main>
</div>
🔹 CSS:
css
.layout
{
display: flex;
flex-wrap: wrap;
}
.box
{
flex: 1 1 100%;
}
/*
Reorder for larger screens */
@media
(min-width: 768px) {
.nav {
order: 1;
}
.main {
order: 2;
}
.header {
order: 0;
}
}
On small screens: Header → Nav → Main
On large screens: Header → Nav → Main (or vice versa, depending on values)
🧩 5. Combining flex-wrap
with order
You can create complex responsive layouts by wrapping
content and reordering it dynamically.
🔸 Example: Product Grid +
Sidebar
html
<div
class="layout">
<aside
class="sidebar">Sidebar</aside>
<section
class="products">Products</section>
</div>
🔹 CSS:
css
.layout
{
display: flex;
flex-wrap: wrap;
}
.sidebar
{
flex: 1 1 200px;
order: 2;
}
.products
{
flex: 2 1 600px;
order: 1;
}
@media
(max-width: 600px) {
.sidebar {
order: 1;
}
.products {
order: 2;
}
}
✅ Automatically rearranges layout
for mobile vs desktop
📊 Summary Table:
flex-wrap and order
Property |
Purpose |
Default |
flex-wrap |
Allows items to wrap |
nowrap |
wrap |
Wrap
top-to-bottom |
— |
wrap-reverse |
Wrap bottom-to-top |
— |
order |
Rearranges
visual order |
0 |
order: -1 |
Moves item before
others |
— |
💡 Best Practices
⚠️ Common Pitfalls
Mistake |
Cause |
Fix |
Items overflowing
the container |
flex-wrap not enabled |
Add flex-wrap: wrap |
Unintended order changes |
Same order
value used across items |
Assign unique
values |
Visual order not
matching HTML |
Misuse of order |
Use clear comments and
maintain logical flow |
🛠️ Real-World UI Patterns
Using Flexbox Reordering
🔹 Tabs → Stack on Mobile
Tabs (in row) collapse into a stacked column on smaller
screens using:
🔹 Product Grids
Flex items wrap into multiple rows and maintain equal width
using:
css
.card
{
flex: 1 1 300px;
}
🔹 Content-First Mobile
Navigation
Reorder layout to show main content first on small
screens, and sidebar/menu first on large screens using:
css
@media
(max-width: 768px) {
.main {
order: 1;
}
.sidebar {
order: 2;
}
}
📍 Chapter Recap: What
You’ve Learned
Up next: We’ll build full real-world UI layouts with
Flexbox in Chapter 5!
A: Flexbox (Flexible Box Layout) is a CSS layout
model designed to distribute space and align items in a container—even when
their size is unknown or dynamic. It's perfect for creating responsive,
one-dimensional layouts (row or column).
A: Flexbox is ideal for one-dimensional layouts
(either horizontal OR vertical), while CSS Grid handles two-dimensional
layouts (both rows AND columns). Flexbox is great for components; Grid is
better for full-page layouts.
A: Not always! Flexbox naturally adapts content for
different screen sizes. But combining Flexbox with media queries gives you
finer control for breakpoints, especially in complex responsive designs.
A: It turns a container into a Flex Container,
activating Flexbox for all its direct children (Flex Items). Once
enabled, you can use properties like justify-content, align-items, and
flex-wrap.
A: Absolutely! One of Flexbox’s most popular features is its ability to center elements both vertically and horizontally using just two properties:
display: flex;
justify-content:
center;
align-items:
center;
A: Use the flex-wrap property:
flex-wrap: wrap;
This allows Flex Items to move onto multiple lines if they
don’t fit in one row.
A: flex is shorthand for:
flex:
[flex-grow] [flex-shrink] [flex-basis];
For example
flex: 1 1 200px;
Means: grow if needed, shrink if needed, and start at 200px
width.
A: Yes! The order property lets you rearrange
elements without changing your HTML structure. Lower numbers appear first.
A: Yes. Flexbox is widely supported in all modern
browsers, including Chrome, Firefox, Edge, Safari, and even IE11 (with minor
limitations). It’s safe to use in production.
Please log in to access this content. You will be redirected to the login page shortly.
LoginReady to take your education and career to the next level? Register today and join our growing community of learners and professionals.
Comments(0)