Table of Contents
- Introduction to Flexbox
- Flexbox Fundamentals
- Flex Container Properties
- Flex Item Properties
- Alignment and Spacing
- Responsive Design with Flexbox
- Common Flexbox Patterns
- Flexbox vs Grid
- Practical Examples
- Best Practices
Introduction to Flexbox
Flexbox (Flexible Box Layout) is a one-dimensional layout model that provides an efficient way to distribute space and align items within a container. It's designed for laying out complex applications and web pages with dynamic or unknown sizes.
Why Flexbox?
<!-- Before Flexbox - using floats --> <div class="clearfix"> <div class="float-left">Item 1</div> <div class="float-left">Item 2</div> <div class="float-left">Item 3</div> </div> <!-- With Flexbox - clean and simple --> <div class="flex-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
/* Traditional float-based layout */ .float-left { float: left; width: 33.33%; padding: 10px; box-sizing: border-box; } .clearfix::after { content: ""; clear: both; display: table; } /* Flexbox layout - simpler and more flexible */ .flex-container { display: flex; } .flex-container > div { flex: 1; padding: 10px; } Flexbox Terminology
<div class="terminology-diagram"> <div class="flex-container"> <div class="flex-item">Item 1</div> <div class="flex-item">Item 2</div> <div class="flex-item">Item 3</div> </div> </div>
/* Terminology CSS */ .flex-container { display: flex; /* This is the flex container */ flex-direction: row; justify-content: space-between; align-items: center; } .flex-item { /* These are flex items */ flex: 1; margin: 10px; padding: 20px; background: #f0f0f0; } Key Terms:
- Flex Container: The parent element with
display: flex - Flex Items: Direct children of the flex container
- Main Axis: Primary axis (horizontal by default)
- Cross Axis: Perpendicular to main axis (vertical by default)
- Main Start/End: Beginning and end of main axis
- Cross Start/End: Beginning and end of cross axis
Flexbox Fundamentals
Display Property
/* Block-level flex container */ .flex-container { display: flex; } /* Inline-level flex container */ .inline-flex-container { display: inline-flex; } /* Comparison */ .block-flex { display: flex; width: 100%; height: 100px; background: lightblue; } .inline-flex { display: inline-flex; width: 200px; height: 100px; background: lightgreen; } Basic Flexbox Example
<!DOCTYPE html> <html> <head> <style> .container { display: flex; background: #f0f0f0; padding: 20px; border-radius: 8px; } .box { background: #007bff; color: white; padding: 20px; margin: 10px; border-radius: 4px; text-align: center; flex: 1; } .box:nth-child(2) { background: #28a745; } .box:nth-child(3) { background: #dc3545; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> </body> </html> Flex Container Properties
flex-direction
/* Row (default) */ .row-direction { display: flex; flex-direction: row; /* Items in a row (left to right) */ } /* Row reverse */ .row-reverse { display: flex; flex-direction: row-reverse; /* Items in a row (right to left) */ } /* Column */ .column-direction { display: flex; flex-direction: column; /* Items in a column (top to bottom) */ } /* Column reverse */ .column-reverse { display: flex; flex-direction: column-reverse; /* Items in a column (bottom to top) */ } <!-- Visual example --> <div class="direction-demo"> <h3>flex-direction: row</h3> <div class="row-direction"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <h3>flex-direction: row-reverse</h3> <div class="row-reverse"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <h3>flex-direction: column</h3> <div class="column-direction"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> </div>
flex-wrap
/* No wrap (default) */ .nowrap { display: flex; flex-wrap: nowrap; /* All items on one line */ } /* Wrap */ .wrap { display: flex; flex-wrap: wrap; /* Items wrap to next line */ } /* Wrap reverse */ .wrap-reverse { display: flex; flex-wrap: wrap-reverse; /* Items wrap in reverse direction */ } <div class="wrap-demo"> <h3>flex-wrap: nowrap</h3> <div class="nowrap" style="width: 300px;"> <div style="width: 150px;">Item 1</div> <div style="width: 150px;">Item 2</div> <div style="width: 150px;">Item 3</div> <div style="width: 150px;">Item 4</div> </div> <h3>flex-wrap: wrap</h3> <div class="wrap" style="width: 300px;"> <div style="width: 150px;">Item 1</div> <div style="width: 150px;">Item 2</div> <div style="width: 150px;">Item 3</div> <div style="width: 150px;">Item 4</div> </div> </div>
flex-flow (Shorthand)
/* flex-flow: <flex-direction> <flex-wrap> */ .flex-flow-example { display: flex; flex-flow: row wrap; /* direction and wrap in one property */ } /* Different combinations */ .flex-flow-row-nowrap { flex-flow: row nowrap; } .flex-flow-column-wrap { flex-flow: column wrap; } .flex-flow-row-reverse-wrap { flex-flow: row-reverse wrap; } justify-content
/* Main axis alignment */ /* Items at start (default) */ .justify-start { display: flex; justify-content: flex-start; } /* Items at end */ .justify-end { display: flex; justify-content: flex-end; } /* Items centered */ .justify-center { display: flex; justify-content: center; } /* Space between items */ .justify-between { display: flex; justify-content: space-between; } /* Space around items */ .justify-around { display: flex; justify-content: space-around; } /* Space evenly between items */ .justify-evenly { display: flex; justify-content: space-evenly; } <div class="justify-demo"> <h3>justify-content: flex-start</h3> <div class="justify-start"> <div>1</div><div>2</div><div>3</div> </div> <h3>justify-content: center</h3> <div class="justify-center"> <div>1</div><div>2</div><div>3</div> </div> <h3>justify-content: space-between</h3> <div class="justify-between"> <div>1</div><div>2</div><div>3</div> </div> <h3>justify-content: space-around</h3> <div class="justify-around"> <div>1</div><div>2</div><div>3</div> </div> <h3>justify-content: space-evenly</h3> <div class="justify-evenly"> <div>1</div><div>2</div><div>3</div> </div> </div>
align-items
/* Cross axis alignment (single line) */ /* Items stretch to fill (default) */ .align-stretch { display: flex; align-items: stretch; height: 200px; } /* Items at start */ .align-start { display: flex; align-items: flex-start; height: 200px; } /* Items at end */ .align-end { display: flex; align-items: flex-end; height: 200px; } /* Items centered */ .align-center { display: flex; align-items: center; height: 200px; } /* Items aligned to baseline */ .align-baseline { display: flex; align-items: baseline; height: 200px; } <div class="align-demo"> <h3>align-items: flex-start</h3> <div class="align-start"> <div style="height: 40px;">1</div> <div style="height: 60px;">2</div> <div style="height: 80px;">3</div> </div> <h3>align-items: center</h3> <div class="align-center"> <div style="height: 40px;">1</div> <div style="height: 60px;">2</div> <div style="height: 80px;">3</div> </div> <h3>align-items: flex-end</h3> <div class="align-end"> <div style="height: 40px;">1</div> <div style="height: 60px;">2</div> <div style="height: 80px;">3</div> </div> </div>
align-content
/* Cross axis alignment (multiple lines) */ /* Lines packed at start */ .align-content-start { display: flex; flex-wrap: wrap; align-content: flex-start; height: 400px; } /* Lines packed at end */ .align-content-end { display: flex; flex-wrap: wrap; align-content: flex-end; height: 400px; } /* Lines centered */ .align-content-center { display: flex; flex-wrap: wrap; align-content: center; height: 400px; } /* Space between lines */ .align-content-between { display: flex; flex-wrap: wrap; align-content: space-between; height: 400px; } /* Space around lines */ .align-content-around { display: flex; flex-wrap: wrap; align-content: space-around; height: 400px; } /* Lines stretched to fill */ .align-content-stretch { display: flex; flex-wrap: wrap; align-content: stretch; height: 400px; } <div class="align-content-demo"> <h3>align-content: flex-start</h3> <div class="align-content-start"> <div style="width: 40%;">Item 1</div> <div style="width: 40%;">Item 2</div> <div style="width: 40%;">Item 3</div> <div style="width: 40%;">Item 4</div> </div> <h3>align-content: space-between</h3> <div class="align-content-between"> <div style="width: 40%;">Item 1</div> <div style="width: 40%;">Item 2</div> <div style="width: 40%;">Item 3</div> <div style="width: 40%;">Item 4</div> </div> </div>
Flex Item Properties
order
/* Reorder flex items */ .container { display: flex; } .item1 { order: 2; /* Default is 0 */ } .item2 { order: 1; /* Appears before item1 */ } .item3 { order: 3; /* Appears after item1 */ } /* Visual reordering example */ .order-demo { display: flex; } .order-demo div:nth-child(1) { order: 3; background: #ff6b6b; } .order-demo div:nth-child(2) { order: 1; background: #4ecdc4; } .order-demo div:nth-child(3) { order: 2; background: #45b7d1; } <div class="order-demo"> <div>First in HTML (appears third)</div> <div>Second in HTML (appears first)</div> <div>Third in HTML (appears second)</div> </div>
flex-grow
/* Ability to grow */ /* All items grow equally */ .equal-grow { display: flex; } .equal-grow div { flex-grow: 1; /* Each takes equal share of extra space */ } /* Different growth factors */ .different-grow { display: flex; } .different-grow div:nth-child(1) { flex-grow: 1; } .different-grow div:nth-child(2) { flex-grow: 2; } .different-grow div:nth-child(3) { flex-grow: 1; } /* Item 2 takes twice as much extra space as items 1 and 3 */ <div class="different-grow"> <div>Grow: 1</div> <div>Grow: 2</div> <div>Grow: 1</div> </div>
flex-shrink
/* Ability to shrink */ /* Items shrink equally */ .equal-shrink { display: flex; width: 500px; } .equal-shrink div { flex-shrink: 1; width: 200px; /* Total 600px > container */ } /* Different shrink factors */ .different-shrink { display: flex; width: 500px; } .different-shrink div:nth-child(1) { flex-shrink: 1; width: 200px; } .different-shrink div:nth-child(2) { flex-shrink: 2; /* Shrinks twice as much */ width: 200px; } .different-shrink div:nth-child(3) { flex-shrink: 1; width: 200px; } flex-basis
/* Initial main size of item */ /* Fixed width */ .fixed-basis { flex-basis: 200px; } /* Percentage */ .percentage-basis { flex-basis: 33.33%; } /* Auto (default) */ .auto-basis { flex-basis: auto; /* Size based on content */ } /* Content-based */ .content-basis { flex-basis: content; /* Size based on content */ } flex (Shorthand)
/* flex: <flex-grow> <flex-shrink> <flex-basis> */ /* Default */ .default-flex { flex: 0 1 auto; /* Don't grow, can shrink, basis auto */ } /* Common patterns */ .flex-1 { flex: 1; /* flex: 1 1 0; Grow and shrink equally */ } .flex-auto { flex: auto; /* flex: 1 1 auto; Grow and shrink, basis auto */ } .flex-initial { flex: initial; /* flex: 0 1 auto; Default */ } .flex-none { flex: none; /* flex: 0 0 auto; Fixed size */ } /* Specific combinations */ .flex-grow-only { flex: 1 0 auto; /* Grow but don't shrink */ } .flex-shrink-only { flex: 0 1 auto; /* Don't grow, can shrink (default) */ } .flex-fixed { flex: 0 0 200px; /* Fixed width, no grow/shrink */ } <div class="flex-shorthand-demo"> <div style="flex: 1;">flex: 1</div> <div style="flex: 2;">flex: 2</div> <div style="flex: 1;">flex: 1</div> <div style="flex: none;">flex: none</div> </div>
align-self
/* Override align-items for individual items */ .container { display: flex; align-items: flex-start; /* All items align to start */ height: 300px; } .item-special { align-self: center; /* This item centers itself */ } .item-bottom { align-self: flex-end; /* This item aligns to bottom */ } .item-stretch { align-self: stretch; /* This item stretches */ } <div class="container" style="height: 200px; background: #f0f0f0;"> <div style="align-self: flex-start;">Start</div> <div style="align-self: center;">Center</div> <div style="align-self: flex-end;">End</div> <div style="align-self: stretch;">Stretch</div> </div>
Alignment and Spacing
Perfect Centering
/* The holy grail of centering */ .centering-demo { display: flex; justify-content: center; align-items: center; height: 400px; background: #f0f0f0; } .centered-content { background: #007bff; color: white; padding: 20px; border-radius: 8px; } /* Both axes centering */ .both-axes-center { display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Horizontal centering only */ .horizontal-center { display: flex; justify-content: center; } /* Vertical centering only */ .vertical-center { display: flex; align-items: center; height: 400px; } <div class="centering-demo"> <div class="centered-content"> Perfectly Centered! </div> </div>
Gap and Margin
/* Gap property (modern) */ .gap-demo { display: flex; gap: 20px; /* Space between items */ flex-wrap: wrap; } /* Different gap directions */ .gap-row-column { display: flex; flex-wrap: wrap; row-gap: 20px; /* Vertical gap */ column-gap: 10px; /* Horizontal gap */ gap: 20px 10px; /* Shorthand: row column */ } /* Auto margins for spacing */ .auto-margin-demo { display: flex; } .push-right { margin-left: auto; /* Pushes item to the right */ } .push-down { margin-top: auto; /* Pushes item down (in column) */ } <!-- Navigation with auto margins --> <nav style="display: flex;"> <a href="#">Home</a> <a href="#">About</a> <a href="#" style="margin-left: auto;">Login</a> <a href="#">Sign Up</a> </nav> <!-- Card with push-down --> <div style="display: flex; flex-direction: column; height: 300px;"> <h3>Card Title</h3> <p>Card content...</p> <button style="margin-top: auto;">Action</button> </div>
Responsive Design with Flexbox
Responsive Navigation
<nav class="responsive-nav"> <div class="logo">Logo</div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> <button class="nav-toggle">☰</button> </nav>
.responsive-nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #333; color: white; } .logo { font-size: 1.5rem; font-weight: bold; } .nav-links { display: flex; list-style: none; gap: 2rem; margin: 0; } .nav-links a { color: white; text-decoration: none; transition: color 0.3s; } .nav-links a:hover { color: #007bff; } .nav-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } /* Mobile responsive */ @media (max-width: 768px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: #333; padding: 1rem; gap: 1rem; } .nav-links.show { display: flex; } } Responsive Card Grid
<div class="card-grid"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> <div class="card">Card 5</div> <div class="card">Card 6</div> </div>
.card-grid { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; } .card { flex: 1 1 300px; /* Grow, shrink, basis 300px */ min-width: 250px; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Alternative approach */ .alt-card-grid { display: flex; flex-wrap: wrap; margin: -10px; /* Negative margin for gutters */ } .alt-card { flex: 1 1 calc(33.333% - 20px); margin: 10px; min-width: 250px; } @media (max-width: 768px) { .alt-card { flex: 1 1 calc(50% - 20px); } } @media (max-width: 480px) { .alt-card { flex: 1 1 100%; } } Responsive Layout with Flexbox
<div class="responsive-layout"> <header class="header">Header</header> <div class="content-wrapper"> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <aside class="sidebar-right">Right Sidebar</aside> </div> <footer class="footer">Footer</footer> </div>
.responsive-layout { display: flex; flex-direction: column; min-height: 100vh; } .header, .footer { padding: 1rem; background: #333; color: white; text-align: center; } .content-wrapper { display: flex; flex: 1; /* Take remaining space */ gap: 20px; padding: 20px; } .sidebar { flex: 0 0 200px; background: #f0f0f0; padding: 20px; } .main { flex: 1; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .sidebar-right { flex: 0 0 200px; background: #f0f0f0; padding: 20px; } /* Tablet */ @media (max-width: 992px) { .content-wrapper { flex-wrap: wrap; } .sidebar { flex: 1 1 200px; } .main { flex: 1 1 100%; order: -1; /* Main content first */ } } /* Mobile */ @media (max-width: 768px) { .content-wrapper { flex-direction: column; } .sidebar, .sidebar-right { flex: 1 1 auto; } } Common Flexbox Patterns
Holy Grail Layout
<div class="holy-grail"> <header class="holy-grail-header">Header</header> <div class="holy-grail-body"> <nav class="holy-grail-nav">Navigation</nav> <main class="holy-grail-main">Main Content</main> <aside class="holy-grail-aside">Sidebar</aside> </div> <footer class="holy-grail-footer">Footer</footer> </div>
.holy-grail { display: flex; flex-direction: column; min-height: 100vh; } .holy-grail-header, .holy-grail-footer { padding: 1rem; background: #333; color: white; text-align: center; } .holy-grail-body { display: flex; flex: 1; } .holy-grail-nav, .holy-grail-aside { flex: 0 0 200px; padding: 1rem; background: #f0f0f0; } .holy-grail-main { flex: 1; padding: 1rem; } @media (max-width: 768px) { .holy-grail-body { flex-direction: column; } .holy-grail-nav, .holy-grail-aside { flex: 1 1 auto; } } Media Object
<div class="media"> <img class="media-image" src="avatar.jpg" alt="Avatar"> <div class="media-body"> <h3 class="media-title">Media Title</h3> <p class="media-content">This is the content of the media object. It can be as long as needed and will wrap appropriately.</p> </div> </div> <!-- Media with image on right --> <div class="media media-reverse"> <img class="media-image" src="avatar.jpg" alt="Avatar"> <div class="media-body"> <h3 class="media-title">Media with Image Right</h3> <p class="media-content">The image appears on the right side using flex-direction row-reverse.</p> </div> </div> <!-- Nested media --> <div class="media"> <img class="media-image" src="avatar.jpg" alt="Avatar"> <div class="media-body"> <h3 class="media-title">Parent Media</h3> <p>Parent content...</p> <div class="media"> <img class="media-image" src="avatar.jpg" alt="Avatar"> <div class="media-body"> <h4 class="media-title">Nested Media</h4> <p>Nested content...</p> </div> </div> </div> </div>
.media { display: flex; align-items: flex-start; gap: 20px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px; } .media-image { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .media-body { flex: 1; } .media-title { margin: 0 0 10px 0; color: #333; } .media-content { margin: 0; color: #666; line-height: 1.6; } .media-reverse { flex-direction: row-reverse; } /* Compact media */ .media-compact { align-items: center; } .media-compact .media-image { width: 40px; height: 40px; } .media-compact .media-title { font-size: 0.9rem; margin-bottom: 0; } Card Layouts
<div class="cards-container"> <!-- Basic Card --> <div class="card"> <img src="https://via.placeholder.com/300x200" alt="Card image" class="card-image"> <div class="card-content"> <h3 class="card-title">Card Title</h3> <p class="card-text">This is a basic card with some content. It's flexible and reusable.</p> <button class="card-button">Read More</button> </div> </div> <!-- Card with Footer --> <div class="card card-footer"> <div class="card-content"> <h3 class="card-title">Card with Footer</h3> <p class="card-text">This card has a separate footer section with actions.</p> </div> <div class="card-footer"> <button class="btn">Cancel</button> <button class="btn btn-primary">Save</button> </div> </div> <!-- Horizontal Card --> <div class="card card-horizontal"> <img src="https://via.placeholder.com/150x150" alt="Card image" class="card-image"> <div class="card-content"> <h3 class="card-title">Horizontal Card</h3> <p class="card-text">This card displays image and content side by side.</p> <button class="card-button">Details</button> </div> </div> </div>
.cards-container { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; } .card { flex: 1 1 300px; display: flex; flex-direction: column; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .card-image { width: 100%; height: 200px; object-fit: cover; } .card-content { flex: 1; padding: 20px; } .card-title { margin: 0 0 10px 0; font-size: 1.25rem; color: #333; } .card-text { margin: 0 0 20px 0; color: #666; line-height: 1.6; } .card-button { align-self: flex-start; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .card-button:hover { background: #0056b3; } /* Card with footer */ .card-footer { margin-top: auto; } .card-footer .btn { width: 100%; padding: 10px; border: none; background: #f0f0f0; cursor: pointer; } .card-footer .btn:hover { background: #e0e0e0; } /* Horizontal card */ .card-horizontal { flex-direction: row; flex: 1 1 500px; } .card-horizontal .card-image { flex: 0 0 150px; height: auto; } @media (max-width: 600px) { .card-horizontal { flex-direction: column; } .card-horizontal .card-image { flex: 0 0 auto; height: 150px; } } Navigation Bars
<!-- Simple Navbar --> <nav class="navbar"> <div class="navbar-brand"> <a href="/">MyApp</a> </div> <ul class="navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">About</a></li> </ul> <div class="navbar-actions"> <button class="btn btn-outline">Login</button> <button class="btn btn-primary">Sign Up</button> </div> </nav> <!-- Navbar with dropdown --> <nav class="navbar navbar-dropdown"> <div class="navbar-brand"> <a href="/">MyApp</a> </div> <ul class="navbar-nav"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Products ▾</a> <ul class="dropdown-menu"> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul> </li> <li><a href="#">About</a></li> </ul> <button class="navbar-toggle">☰</button> </nav> <!-- Centered Navbar --> <nav class="navbar navbar-centered"> <div class="navbar-brand">Logo</div> <ul class="navbar-nav-centered"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">About</a></li> </ul> </nav>
/* Navbar base */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #333; color: white; } .navbar a { color: white; text-decoration: none; } .navbar-brand { font-size: 1.5rem; font-weight: bold; } .navbar-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 2rem; } .navbar-actions { display: flex; gap: 1rem; } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 4px; padding: 0.5rem 0; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu a { color: #333; padding: 0.5rem 1rem; display: block; } .dropdown-menu a:hover { background: #f0f0f0; } /* Centered navbar */ .navbar-centered { flex-direction: column; gap: 1rem; } .navbar-nav-centered { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; } /* Mobile toggle */ .navbar-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } @media (max-width: 768px) { .navbar { flex-wrap: wrap; } .navbar-nav { display: none; width: 100%; flex-direction: column; gap: 1rem; padding: 1rem 0; } .navbar-nav.show { display: flex; } .navbar-toggle { display: block; } } Form Layouts
<!-- Horizontal Form --> <form class="form-horizontal"> <div class="form-group"> <label for="name" class="form-label">Name</label> <input type="text" id="name" class="form-input"> </div> <div class="form-group"> <label for="email" class="form-label">Email</label> <input type="email" id="email" class="form-input"> </div> <div class="form-group"> <label for="message" class="form-label">Message</label> <textarea id="message" class="form-input"></textarea> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-outline">Reset</button> </div> </form> <!-- Inline Form --> <form class="form-inline"> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <button type="submit" class="btn btn-primary">Login</button> </form> <!-- Form with Sidebar --> <div class="form-with-sidebar"> <div class="form-sidebar"> <h3>Settings</h3> <ul> <li><a href="#">Profile</a></li> <li><a href="#">Account</a></li> <li><a href="#">Privacy</a></li> </ul> </div> <form class="form-main"> <div class="form-group"> <label>Username</label> <input type="text" value="johndoe"> </div> <div class="form-group"> <label>Email</label> <input type="email" value="[email protected]"> </div> <div class="form-group"> <label>Bio</label> <textarea rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">Save Changes</button> </form> </div>
/* Horizontal form */ .form-horizontal { max-width: 500px; margin: 0 auto; } .form-group { display: flex; align-items: center; margin-bottom: 1rem; } .form-label { flex: 0 0 100px; margin-right: 1rem; font-weight: 600; } .form-input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } .form-actions { display: flex; gap: 1rem; margin-top: 2rem; } /* Inline form */ .form-inline { display: flex; gap: 0.5rem; align-items: center; padding: 1rem; background: #f8f9fa; border-radius: 8px; } .form-inline input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } /* Form with sidebar */ .form-with-sidebar { display: flex; gap: 2rem; max-width: 800px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .form-sidebar { flex: 0 0 200px; padding: 2rem; background: #f8f9fa; border-radius: 8px 0 0 8px; } .form-sidebar ul { list-style: none; padding: 0; } .form-sidebar li { margin-bottom: 0.5rem; } .form-sidebar a { color: #333; text-decoration: none; } .form-sidebar a:hover { color: #007bff; } .form-main { flex: 1; padding: 2rem; } /* Responsive */ @media (max-width: 768px) { .form-group { flex-direction: column; align-items: flex-start; } .form-label { flex: none; margin-bottom: 0.5rem; } .form-with-sidebar { flex-direction: column; } .form-sidebar { flex: none; border-radius: 8px 8px 0 0; } .form-inline { flex-direction: column; align-items: stretch; } .form-inline input { width: 100%; } } Flexbox vs Grid
When to Use Flexbox vs Grid
<div class="comparison"> <h3>Flexbox (1D) - for components</h3> <div class="flexbox-demo"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <h3>Grid (2D) - for overall layout</h3> <div class="grid-demo"> <div>Header</div> <div>Sidebar</div> <div>Main</div> <div>Footer</div> </div> </div>
.flexbox-demo { display: flex; gap: 10px; } .flexbox-demo > div { flex: 1; padding: 20px; background: #007bff; color: white; } .grid-demo { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 10px; } .grid-demo > div { padding: 20px; background: #28a745; color: white; } .grid-demo div:nth-child(1) { grid-area: header; } .grid-demo div:nth-child(2) { grid-area: sidebar; } .grid-demo div:nth-child(3) { grid-area: main; } .grid-demo div:nth-child(4) { grid-area: footer; } Combined Example
<div class="combined-layout"> <header class="combined-header">Header</header> <div class="combined-grid"> <aside class="combined-sidebar"> <nav class="combined-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </nav> </aside> <main class="combined-main"> <div class="card-grid"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div> </main> </div> <footer class="combined-footer">Footer</footer> </div>
.combined-layout { display: flex; flex-direction: column; min-height: 100vh; } .combined-header, .combined-footer { padding: 1rem; background: #333; color: white; text-align: center; } .combined-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px; flex: 1; } .combined-sidebar { background: #f0f0f0; padding: 20px; } .combined-nav { display: flex; flex-direction: column; gap: 10px; } .combined-nav a { color: #333; text-decoration: none; padding: 8px; border-radius: 4px; } .combined-nav a:hover { background: #ddd; } .card-grid { display: flex; flex-wrap: wrap; gap: 20px; } .card-grid .card { flex: 1 1 200px; min-width: 200px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } @media (max-width: 768px) { .combined-grid { grid-template-columns: 1fr; } } Practical Examples
Example 1: Complete Dashboard Layout
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .dashboard { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { flex: 0 0 250px; background: linear-gradient(180deg, #2c3e50, #1a252f); color: white; display: flex; flex-direction: column; } .sidebar-header { padding: 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .sidebar-header h2 { margin: 0; font-size: 1.5rem; } .sidebar-nav { flex: 1; padding: 2rem 0; } .sidebar-nav a { display: flex; align-items: center; padding: 1rem 2rem; color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.3s; } .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,0.1); color: white; } .sidebar-nav i { width: 24px; margin-right: 1rem; } .sidebar-footer { padding: 2rem; border-top: 1px solid rgba(255,255,255,0.1); } /* Main content */ .main-content { flex: 1; display: flex; flex-direction: column; background: #f5f5f5; } /* Top header */ .top-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .search-bar { display: flex; align-items: center; background: #f5f5f5; border-radius: 4px; padding: 0.5rem; } .search-bar input { border: none; background: none; padding: 0.5rem; outline: none; width: 300px; } .user-menu { display: flex; align-items: center; gap: 1.5rem; } .user-info { display: flex; align-items: center; gap: 0.5rem; } .avatar { width: 40px; height: 40px; background: #007bff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } /* Content area */ .content-area { flex: 1; padding: 2rem; } /* Stats cards */ .stats-grid { display: flex; gap: 20px; margin-bottom: 2rem; } .stat-card { flex: 1; background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; } .stat-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-right: 1rem; } .stat-icon.blue { background: #e3f2fd; color: #1976d2; } .stat-icon.green { background: #e8f5e9; color: #388e3c; } .stat-icon.orange { background: #fff3e0; color: #f57c00; } .stat-icon.red { background: #ffebee; color: #d32f2f; } .stat-info h3 { font-size: 1.75rem; margin-bottom: 0.25rem; } .stat-info p { color: #666; } /* Charts row */ .charts-row { display: flex; gap: 20px; margin-bottom: 2rem; } .chart-card { flex: 1; background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .chart-placeholder { height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 4px; margin-top: 1rem; } /* Table */ .table-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } th { font-weight: 600; color: #666; } .status { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; font-weight: 600; } .status.active { background: #e8f5e9; color: #388e3c; } .status.pending { background: #fff3e0; color: #f57c00; } .status.inactive { background: #ffebee; color: #d32f2f; } /* Responsive */ @media (max-width: 768px) { .dashboard { flex-direction: column; } .sidebar { flex: none; } .stats-grid, .charts-row { flex-direction: column; } .search-bar input { width: 200px; } } </style> </head> <body> <div class="dashboard"> <!-- Sidebar --> <aside class="sidebar"> <div class="sidebar-header"> <h2>Dashboard</h2> </div> <nav class="sidebar-nav"> <a href="#" class="active"> <i>📊</i> Dashboard </a> <a href="#"> <i>📁</i> Projects </a> <a href="#"> <i>👥</i> Team </a> <a href="#"> <i>📅</i> Calendar </a> <a href="#"> <i>📧</i> Messages </a> <a href="#"> <i>⚙️</i> Settings </a> </nav> <div class="sidebar-footer"> <div class="user-info"> <div class="avatar">JD</div> <div> <div>John Doe</div> <small>Administrator</small> </div> </div> </div> </aside> <!-- Main Content --> <main class="main-content"> <!-- Top Header --> <header class="top-header"> <div class="search-bar"> <span>🔍</span> <input type="text" placeholder="Search..."> </div> <div class="user-menu"> <span>🔔</span> <span>💬</span> <div class="user-info"> <div class="avatar">JD</div> <span>John Doe</span> </div> </div> </header> <!-- Content Area --> <div class="content-area"> <!-- Stats Cards --> <div class="stats-grid"> <div class="stat-card"> <div class="stat-icon blue">💰</div> <div class="stat-info"> <h3>$45,678</h3> <p>Revenue</p> </div> </div> <div class="stat-card"> <div class="stat-icon green">👥</div> <div class="stat-info"> <h3>2,345</h3> <p>Users</p> </div> </div> <div class="stat-card"> <div class="stat-icon orange">📊</div> <div class="stat-info"> <h3>78%</h3> <p>Conversion</p> </div> </div> <div class="stat-card"> <div class="stat-icon red">📈</div> <div class="stat-info"> <h3>+23%</h3> <p>Growth</p> </div> </div> </div> <!-- Charts --> <div class="charts-row"> <div class="chart-card"> <h3>Revenue Overview</h3> <div class="chart-placeholder"></div> </div> <div class="chart-card"> <h3>User Activity</h3> <div class="chart-placeholder"></div> </div> </div> <!-- Recent Activity Table --> <div class="table-card"> <h3>Recent Activity</h3> <table> <thead> <tr> <th>User</th> <th>Action</th> <th>Status</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>File upload</td> <td><span class="status active">Completed</span></td> <td>2 min ago</td> </tr> <tr> <td>Jane Smith</td> <td>Profile update</td> <td><span class="status pending">Pending</span></td> <td>15 min ago</td> </tr> <tr> <td>Bob Johnson</td> <td>Login attempt</td> <td><span class="status inactive">Failed</span></td> <td>1 hour ago</td> </tr> </tbody> </table> </div> </div> </main> </div> </body> </html> Example 2: Product Listing Page
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; } /* Header */ .header { background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: bold; color: #007bff; } .search-bar { flex: 1; max-width: 400px; margin: 0 2rem; } .search-bar input { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } .header-actions { display: flex; gap: 1.5rem; } /* Navigation */ .nav { border-top: 1px solid #eee; padding: 0.5rem 2rem; } .nav-list { display: flex; justify-content: center; list-style: none; gap: 2rem; max-width: 1200px; margin: 0 auto; } .nav-list a { color: #333; text-decoration: none; padding: 0.5rem 0; } .nav-list a:hover { color: #007bff; } /* Main Content */ .main-content { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } /* Filters */ .filters { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding: 1rem; background: white; border-radius: 8px; } .filter-group { display: flex; gap: 1rem; flex-wrap: wrap; } .filter-select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } /* Product Grid */ .products-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 2rem; } .product-card { flex: 1 1 calc(33.333% - 20px); min-width: 250px; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .product-image { width: 100%; height: 200px; object-fit: cover; } .product-info { padding: 1.5rem; } .product-category { color: #666; font-size: 0.875rem; text-transform: uppercase; margin-bottom: 0.5rem; } .product-name { font-size: 1.125rem; margin-bottom: 0.5rem; } .product-price { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .current-price { font-size: 1.25rem; font-weight: bold; color: #007bff; } .original-price { color: #999; text-decoration: line-through; } .product-rating { display: flex; align-items: center; gap: 0.5rem; } .stars { color: #ffc107; } .reviews { color: #666; } .product-actions { display: flex; gap: 0.5rem; } .btn { flex: 1; padding: 0.5rem; border: none; border-radius: 4px; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.3s; } .btn-primary { background: #007bff; color: white; } .btn-primary:hover { background: #0056b3; } .btn-outline { background: transparent; border: 1px solid #007bff; color: #007bff; } .btn-outline:hover { background: #007bff; color: white; } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .page-item { list-style: none; } .page-link { display: block; padding: 0.5rem 0.75rem; background: white; border: 1px solid #ccc; border-radius: 4px; color: #333; text-decoration: none; transition: all 0.3s; } .page-link:hover, .page-link.active { background: #007bff; color: white; border-color: #007bff; } /* Footer */ .footer { background: #333; color: white; padding: 3rem 2rem; margin-top: 4rem; } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem; } .footer-section { flex: 1 1 200px; } .footer-section h3 { margin-bottom: 1rem; color: #fff; } .footer-section ul { list-style: none; } .footer-section li { margin-bottom: 0.5rem; } .footer-section a { color: #ccc; text-decoration: none; } .footer-section a:hover { color: white; } .newsletter { display: flex; gap: 0.5rem; } .newsletter input { flex: 1; padding: 0.5rem; border: none; border-radius: 4px; } .newsletter button { padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } @media (max-width: 768px) { .header-top { flex-direction: column; gap: 1rem; } .search-bar { margin: 1rem 0; } .nav-list { flex-wrap: wrap; } .filters { flex-direction: column; gap: 1rem; } .product-card { flex: 1 1 calc(50% - 20px); } } @media (max-width: 480px) { .product-card { flex: 1 1 100%; } } </style> </head> <body> <header class="header"> <div class="header-top"> <div class="logo">🛍️ ShopHub</div> <div class="search-bar"> <input type="text" placeholder="Search products..."> </div> <div class="header-actions"> <span>👤 Account</span> <span>❤️ Wishlist</span> <span>🛒 Cart (2)</span> </div> </div> <nav class="nav"> <ul class="nav-list"> <li><a href="#">Home</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Fashion</a></li> <li><a href="#">Home & Living</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Books</a></li> <li><a href="#">Deals</a></li> </ul> </nav> </header> <main class="main-content"> <div class="filters"> <div class="filter-group"> <select class="filter-select"> <option>All Categories</option> <option>Electronics</option> <option>Fashion</option> <option>Home</option> </select> <select class="filter-select"> <option>Price: Low to High</option> <option>Price: High to Low</option> <option>Newest First</option> <option>Best Selling</option> </select> <select class="filter-select"> <option>All Brands</option> <option>Brand A</option> <option>Brand B</option> <option>Brand C</option> </select> </div> <div> <span>Showing 1-12 of 47 results</span> </div> </div> <div class="products-grid"> <!-- Product Cards --> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Product" class="product-image"> <div class="product-info"> <div class="product-category">Electronics</div> <h3 class="product-name">Wireless Headphones</h3> <div class="product-price"> <span class="current-price">$79.99</span> <span class="original-price">$129.99</span> </div> <div class="product-rating"> <span class="stars">★★★★☆</span> <span class="reviews">(128 reviews)</span> </div> <div class="product-actions"> <button class="btn btn-primary">Add to Cart</button> <button class="btn btn-outline">❤️</button> </div> </div> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Product" class="product-image"> <div class="product-info"> <div class="product-category">Fashion</div> <h3 class="product-name">Classic T-Shirt</h3> <div class="product-price"> <span class="current-price">$24.99</span> <span class="original-price">$39.99</span> </div> <div class="product-rating"> <span class="stars">★★★★★</span> <span class="reviews">(89 reviews)</span> </div> <div class="product-actions"> <button class="btn btn-primary">Add to Cart</button> <button class="btn btn-outline">❤️</button> </div> </div> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Product" class="product-image"> <div class="product-info"> <div class="product-category">Home</div> <h3 class="product-name">Coffee Maker</h3> <div class="product-price"> <span class="current-price">$149.99</span> <span class="original-price">$199.99</span> </div> <div class="product-rating"> <span class="stars">★★★☆☆</span> <span class="reviews">(42 reviews)</span> </div> <div class="product-actions"> <button class="btn btn-primary">Add to Cart</button> <button class="btn btn-outline">❤️</button> </div> </div> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Product" class="product-image"> <div class="product-info"> <div class="product-category">Sports</div> <h3 class="product-name">Yoga Mat</h3> <div class="product-price"> <span class="current-price">$29.99</span> <span class="original-price">$49.99</span> </div> <div class="product-rating"> <span class="stars">★★★★☆</span> <span class="reviews">(56 reviews)</span> </div> <div class="product-actions"> <button class="btn btn-primary">Add to Cart</button> <button class="btn btn-outline">❤️</button> </div> </div> </div> </div> <!-- Pagination --> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link">«</a></li> <li class="page-item"><a href="#" class="page-link active">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">»</a></li> </ul> </main> <footer class="footer"> <div class="footer-content"> <div class="footer-section"> <h3>About Us</h3> <p>Your one-stop shop for all your needs. Quality products, great prices.</p> </div> <div class="footer-section"> <h3>Quick Links</h3> <ul> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Shipping</a></li> <li><a href="#">Returns</a></li> </ul> </div> <div class="footer-section"> <h3>Customer Service</h3> <ul> <li><a href="#">My Account</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Gift Cards</a></li> </ul> </div> <div class="footer-section"> <h3>Newsletter</h3> <p>Subscribe for exclusive deals</p> <div class="newsletter"> <input type="email" placeholder="Your email"> <button>Subscribe</button> </div> </div> </div> </footer> </body> </html> Best Practices
Flexbox Best Practices
/* 1. Use flex shorthand instead of individual properties */ /* Good */ .item { flex: 1 1 300px; } /* Less good */ .item { flex-grow: 1; flex-shrink: 1; flex-basis: 300px; } /* 2. Use gap instead of margins for spacing */ /* Good */ .container { display: flex; gap: 20px; } /* Less good */ .container > * { margin-right: 20px; } .container > *:last-child { margin-right: 0; } /* 3. Use auto margins for simple spacing */ .nav { display: flex; } .push-right { margin-left: auto; } /* 4. Set reasonable min-width for flex items */ .flex-item { flex: 1 1 200px; min-width: 150px; /* Prevents squishing */ } /* 5. Use flex-wrap for responsive layouts */ .responsive-flex { display: flex; flex-wrap: wrap; gap: 20px; } .responsive-flex > * { flex: 1 1 300px; min-width: 250px; } Common Pitfalls and Solutions
/* Pitfall 1: Items not wrapping */ .container { display: flex; /* Missing flex-wrap: wrap */ } /* Solution */ .container { display: flex; flex-wrap: wrap; } /* Pitfall 2: Text overflow */ .item { flex: 1; /* Long text overflows */ } /* Solution */ .item { flex: 1; min-width: 0; /* Allows text to wrap */ word-wrap: break-word; } /* Pitfall 3: Unequal heights */ .container { display: flex; /* Items have different heights */ } /* Solution - align-items defaults to stretch */ .container { display: flex; align-items: stretch; /* Default */ } /* Pitfall 4: Unexpected shrinking */ .item { flex: 1; /* Items shrink too much */ } /* Solution - set min-width */ .item { flex: 1 1 200px; min-width: 150px; } /* Pitfall 5: Margin collapsing */ .container { display: flex; /* Margins between items collapse */ } /* Solution - use gap */ .container { display: flex; gap: 20px; /* Consistent spacing */ } Conclusion
Flexbox is an incredibly powerful layout tool that simplifies complex layouts:
Key Takeaways
- One-dimensional: Perfect for rows or columns
- Direction-agnostic: Works with any writing mode
- Alignment control: Fine-grained control over alignment
- Flexible sizing: Items can grow and shrink as needed
- Order manipulation: Visual reordering without HTML changes
- Responsive by design: Easy to create responsive layouts
When to Use Flexbox
| Use Case | Why Flexbox |
|---|---|
| Navigation bars | Perfect for distributing items |
| Card grids | Items wrap naturally |
| Centering content | Simple justify/align combo |
| Form layouts | Easy alignment of labels and inputs |
| Media objects | Image + content side by side |
| Holy grail layout | Flexible main content area |
Flexbox vs Grid
| Feature | Flexbox | Grid |
|---|---|---|
| Dimensions | 1D (row or column) | 2D (rows and columns) |
| Best for | Components | Overall layout |
| Content-first | Yes | No |
| Layout-first | No | Yes |
| Alignment | Both axes | Both axes |
| Gap support | Yes | Yes |
Next Steps
- Practice with small components first
- Experiment with different flex properties
- Build responsive layouts using flex-wrap
- Combine with Grid for complex layouts
- Test on different screen sizes
- Study common patterns and solutions
Remember: Flexbox is a tool, not a solution for everything. Use it where it makes sense, and combine with CSS Grid for the most powerful layouts!
HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)
HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/
Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/
Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/
Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/
HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/
HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/
HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/
HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/
HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/