MACRO NEPAL
Complete Guide to HTML and CSS Flexbox Layout
awiskar acharya
March 13, 2026
3:57 pm

Table of Contents

  1. Introduction to Flexbox
  2. Flexbox Fundamentals
  3. Flex Container Properties
  4. Flex Item Properties
  5. Alignment and Spacing
  6. Responsive Design with Flexbox
  7. Common Flexbox Patterns
  8. Flexbox vs Grid
  9. Practical Examples
  10. 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

  1. One-dimensional: Perfect for rows or columns
  2. Direction-agnostic: Works with any writing mode
  3. Alignment control: Fine-grained control over alignment
  4. Flexible sizing: Items can grow and shrink as needed
  5. Order manipulation: Visual reordering without HTML changes
  6. Responsive by design: Easy to create responsive layouts

When to Use Flexbox

Use CaseWhy Flexbox
Navigation barsPerfect for distributing items
Card gridsItems wrap naturally
Centering contentSimple justify/align combo
Form layoutsEasy alignment of labels and inputs
Media objectsImage + content side by side
Holy grail layoutFlexible main content area

Flexbox vs Grid

FeatureFlexboxGrid
Dimensions1D (row or column)2D (rows and columns)
Best forComponentsOverall layout
Content-firstYesNo
Layout-firstNoYes
AlignmentBoth axesBoth axes
Gap supportYesYes

Next Steps

  1. Practice with small components first
  2. Experiment with different flex properties
  3. Build responsive layouts using flex-wrap
  4. Combine with Grid for complex layouts
  5. Test on different screen sizes
  6. 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/

Category : HTML AND CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper