Chapter 15 Intermediate 62 Questions

Practice Questions — Flexbox - The Complete Guide

← Back to Notes
16 Easy
19 Medium
10 Hard

Topic-Specific Questions

Question 1
Easy
What does display: flex do?
Applied to a parent.
Makes the element a flex container. Its direct children become flex items that can be aligned and distributed.
Question 2
Easy
What axis does justify-content align along?
It is the primary flow direction.
The MAIN axis (horizontal in a row, vertical in a column).
Question 3
Easy
What axis does align-items align along?
Perpendicular to main.
The CROSS axis (perpendicular to main).
Question 4
Easy
What does this do?
display: flex;
justify-content: center;
align-items: center;
Centers in both directions.
Centers child content both horizontally and vertically inside the container.
Question 5
Easy
What is the default flex-direction?
Left to right.
row
Question 6
Easy
What does justify-content: space-between do?
Edges pinned, space shared.
First item at the start, last item at the end, with equal space distributed between items.
Question 7
Easy
What does gap: 16px do in a flex container?
Modern replacement for margin.
Adds 16px of space between all flex items (but not at the outer edges of the container).
Question 8
Easy
What does flex-wrap: wrap do?
Multiple lines.
Allows flex items to wrap onto new lines when they do not fit on one line.
Question 9
Easy
What does flex: 1 do?
Grow to fill.
Makes the item grow to fill any available space (equivalent to flex: 1 1 0).
Question 10
Easy
Where does display: flex go to align a div inside a container?
On the parent.
On the PARENT (the container), not on the child. The parent becomes the flex container; the child becomes a flex item.
Question 11
Medium
What does this navbar pattern do?
.nav { display: flex; justify-content: space-between; align-items: center; }
Think navbar with logo and menu.
Places children at opposite ends (logo left, menu right), with all items vertically centered.
Question 12
Medium
What does flex-direction: column change?
Axes rotate.
Flex items stack vertically. The main axis becomes vertical and the cross axis becomes horizontal.
Question 13
Medium
What happens?
.grid { display: flex; }
.card { flex: 1; }
All items grow equally.
Each card grows to take an equal share of the available space in the row.
Question 14
Medium
What does align-self: flex-end do on a flex item?
Override align-items.
Aligns that specific item to the end of the cross axis, overriding the container's align-items value.
Question 15
Medium
What is the difference between justify-content: space-between and space-around?
Edges.
space-between puts no space at the outer edges; space-around adds equal space around each item (so outer edges get half the space between items).
Question 16
Medium
What does flex: 1 1 200px mean?
grow, shrink, basis.
flex-grow: 1 (grow to fill), flex-shrink: 1 (can shrink), flex-basis: 200px (start at 200px).
Question 17
Medium
How do you prevent an item from shrinking?
flex-shrink.
flex-shrink: 0 or flex: 0 0 auto
Question 18
Medium
What does this sticky footer code do?
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
Main grows to push footer down.
Makes the footer stick to the bottom of the viewport even when main content is short. main grows to fill all leftover vertical space.
Question 19
Medium
What does order: -1 do?
Lower comes first.
Places the item before all other items with the default order (0) regardless of source order in HTML.
Question 20
Medium
What is the default align-items value?
Items fill the cross axis.
stretch
Question 21
Hard
What is the layout?
.container { display: flex; flex-direction: column; height: 500px; justify-content: space-between; }
/* Three child divs */
Column + space-between.
Three children stacked vertically: first at the top, last at the bottom, middle evenly spaced between them.
Question 22
Hard
Why does this card layout fail?
.grid { display: flex; }
.card { width: 300px; }
/* 6 cards on a narrow container */
No wrap.
All 6 cards try to fit on one line, shrinking below 300px. Without flex-wrap, they squeeze instead of wrapping to a new row.
Question 23
Hard
What happens?
.container { display: flex; }
.a { flex: 2; }
.b { flex: 1; }
.c { flex: 1; }
Ratios.
.a takes 2x the space of .b and .c. Total is 4 parts: .a gets 50%, .b gets 25%, .c gets 25% of the available space.
Question 24
Hard
When should you use flex-direction: column?
Vertical layouts.
Use column when you want items stacked vertically: sidebars, forms, card contents, footers, anything where children should flow top to bottom. Remember that in column mode, justify-content controls vertical alignment and align-items controls horizontal.
Question 25
Hard
Why is gap better than margin for spacing flex items?
Edges and last-child.
gap only adds space between items, not at the outer edges, so you do not need hacks like :last-child { margin: 0 }. It is simpler, cleaner, and works consistently in both flex and grid layouts.

Mixed & Application Questions

Question 1
Easy
Does display: flex go on the parent or child?
Container.
The parent (container).
Question 2
Easy
Which property wraps items onto new lines?
flex-...
flex-wrap: wrap
Question 3
Easy
What centers items horizontally in a row?
Main axis.
justify-content: center
Question 4
Easy
What centers items vertically in a row?
Cross axis.
align-items: center
Question 5
Easy
What is the flex shorthand default?
Three values.
flex: 0 1 auto (no grow, can shrink, based on content).
Question 6
Easy
Which property puts gaps between flex items?
Not margin.
gap
Question 7
Medium
What does flex-direction: column-reverse do?
Flipped column.
Stacks items vertically from bottom to top (reverses the source order visually).
Question 8
Medium
What is the difference between space-between, space-around, and space-evenly?
Edge spacing.
space-between: no space at edges, equal between items. space-around: equal space around each item (half-gaps at edges). space-evenly: equal space everywhere including edges.
Question 9
Medium
How do you make a flex item NOT shrink?
flex-shrink.
flex-shrink: 0
Question 10
Medium
What does order: 2 do compared to another item with order: 1?
Higher values come later.
The order: 2 item is placed after the order: 1 item (higher order = later).
Question 11
Medium
What is the difference between align-items and align-content?
Items vs lines.
align-items aligns items within each line along the cross axis. align-content aligns whole lines in a wrapped multi-line flex container along the cross axis. align-content only has an effect when there is more than one line.
Question 12
Medium
How do you center a single item perfectly with flexbox?
One container.
Apply to the parent: display: flex; justify-content: center; align-items: center;
Question 13
Medium
What is a common flexbox navbar pattern?
Space between.
display: flex; justify-content: space-between; align-items: center. This places the first child (logo) at the left and the last child at the right, with everything vertically centered.
Question 14
Medium
How do you build a 3-column card grid that wraps on small screens?
flex + wrap + flex-basis.
.grid { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 280px; }
Question 15
Medium
Why does main content with flex: 1 push the footer to the bottom?
Flex grow.
When body is a flex column with min-height: 100vh, the items stack vertically. Main with flex: 1 grows to fill all leftover vertical space, pushing the footer against the bottom of the viewport.
Question 16
Hard
What happens?
.container { display: flex; height: 200px; }
.item { align-self: center; }
align-self without align-items.
The item is vertically centered in the 200px container. align-self overrides align-items even if align-items was not explicitly set.
Question 17
Hard
What is the result?
.container { display: flex; }
.a { flex: 1; }
.b { flex: 2; }
.c { flex: 3; }
Ratio-based distribution.
.a gets 1/6, .b gets 2/6 (1/3), .c gets 3/6 (1/2) of the available space.
Question 18
Hard
What does flex-basis do that width does not?
Flex basis is the starting point for flex calculations.
flex-basis is the starting size used by the flex algorithm before grow/shrink is applied. In a flex container, flex-basis usually wins over width for flex sizing calculations. It can also use the 'auto' keyword (use content size) or 0 (start from zero and grow).
Question 19
Hard
What pattern pushes one flex item all the way to the right?
margin-left auto.
Apply margin-left: auto to the item you want to push right. Auto margins consume all available space, sending the item to the opposite edge.
Question 20
Hard
Why is flexbox easier than float-based layouts?
No clearfix, no height issues.
Flexbox handles alignment, spacing, ordering, and wrapping with dedicated properties. It does not need clearfix hacks. It gives equal-height columns for free. It handles centering easily. Floats were never designed for layout -- they were designed for text wrapping around images.

Multiple Choice Questions

MCQ 1
How do you make an element a flex container?
  • A. display: block
  • B. display: flex
  • C. position: flex
  • D. flex: 1
Answer: B
B is correct. display: flex turns an element into a flex container. Its direct children become flex items.
MCQ 2
Which property aligns items along the main axis?
  • A. align-items
  • B. justify-content
  • C. align-content
  • D. flex-align
Answer: B
B is correct. justify-content distributes items along the main axis.
MCQ 3
Which property aligns items along the cross axis?
  • A. align-items
  • B. justify-content
  • C. flex-wrap
  • D. flex-direction
Answer: A
A is correct. align-items aligns along the cross axis (perpendicular to flex-direction).
MCQ 4
What is the default flex-direction?
  • A. row
  • B. column
  • C. row-reverse
  • D. wrap
Answer: A
A is correct. Default is row: items laid out horizontally left to right.
MCQ 5
What does flex: 1 do?
  • A. Hides the item
  • B. Makes the item grow to fill available space
  • C. Adds 1px margin
  • D. Sets opacity to 1
Answer: B
B is correct. flex: 1 (shorthand for flex: 1 1 0) makes the item grow to share available space.
MCQ 6
Which value pushes the first and last items to opposite edges?
  • A. center
  • B. flex-start
  • C. space-between
  • D. stretch
Answer: C
C is correct. space-between puts first at start, last at end, with equal space between them.
MCQ 7
Which lets items wrap onto new lines?
  • A. flex-wrap: wrap
  • B. flex-wrap: nowrap
  • C. overflow: wrap
  • D. flex-flow: auto
Answer: A
A is correct. flex-wrap: wrap allows items to flow onto multiple lines.
MCQ 8
Which is the modern replacement for margins between flex items?
  • A. padding
  • B. gap
  • C. spacing
  • D. margin-between
Answer: B
B is correct. gap creates space between items without adding margin at the edges. Works in flex and grid containers.
MCQ 9
How do you center a div both horizontally and vertically with flexbox?
  • A. margin: auto
  • B. display: flex; justify-content: center; align-items: center
  • C. text-align: center
  • D. position: center
Answer: B
B is correct. The holy grail centering pattern: three lines, perfectly centered.
MCQ 10
Which property overrides align-items for a single item?
  • A. align-self
  • B. align-override
  • C. item-align
  • D. self-align
Answer: A
A is correct. align-self is applied to individual flex items to override the container's align-items for that item.
MCQ 11
In flex-direction: column, what does justify-content control?
  • A. Horizontal alignment
  • B. Vertical alignment
  • C. Text alignment
  • D. Nothing
Answer: B
B is correct. justify-content always aligns along the main axis. In column direction, main axis is vertical, so justify-content aligns vertically.
MCQ 12
In flex-direction: column, what does align-items control?
  • A. Horizontal alignment
  • B. Vertical alignment
  • C. Text alignment
  • D. Nothing
Answer: A
A is correct. align-items aligns along the cross axis. In column direction, cross axis is horizontal.
MCQ 13
What does flex: 0 0 auto mean?
  • A. Grow, shrink, auto basis
  • B. No grow, no shrink, content-based size
  • C. Maximum size
  • D. Grow to 0
Answer: B
B is correct. flex: 0 0 auto means flex-grow: 0, flex-shrink: 0, flex-basis: auto -- the item stays at its content size and never grows or shrinks.
MCQ 14
What is the classic navbar flex pattern?
  • A. display: flex; justify-content: center;
  • B. display: flex; justify-content: space-between; align-items: center;
  • C. display: block; float: left;
  • D. display: inline-flex;
Answer: B
B is correct. space-between pushes logo left and menu right; align-items: center vertically centers them.
MCQ 15
How do you make items stack vertically?
  • A. flex-direction: column
  • B. display: block
  • C. align-items: column
  • D. float: vertical
Answer: A
A is correct. flex-direction: column stacks items vertically, making the main axis vertical.
MCQ 16
Which flex value makes an item twice as wide as others with flex: 1?
  • A. flex: 2
  • B. flex: double
  • C. flex: 2x
  • D. width: 200%
Answer: A
A is correct. flex values are ratios. flex: 2 grows twice as much as flex: 1 from the remaining space.
MCQ 17
Which creates a responsive card grid that wraps on narrow screens?
  • A. display: flex; flex-wrap: wrap; gap: 20px; then .card { flex: 1 1 260px; }
  • B. display: block; with width: 25%;
  • C. display: inline-block;
  • D. float: left;
Answer: A
A is correct. flex: 1 1 260px gives each card a flexible size that grows but never shrinks below 260px, and flex-wrap lets them wrap.
MCQ 18
What is align-content used for?
  • A. Alignment of text inside an item
  • B. Alignment of multiple lines in a wrapped flex container along the cross axis
  • C. Alignment of the entire container
  • D. Background alignment
Answer: B
B is correct. align-content only matters when flex-wrap creates multiple rows. It distributes those rows along the cross axis.
MCQ 19
How do you build a sticky footer with flexbox?
  • A. position: fixed on footer
  • B. body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }
  • C. margin-top: auto on footer only
  • D. float: bottom
Answer: B
B is correct. Flex column body, main grows to fill leftover space, pushing footer down. Works even with short content.
MCQ 20
What does order: -1 do?
  • A. Hides the item
  • B. Moves the item to appear before items with default order
  • C. Reduces size by 1
  • D. Throws an error
Answer: B
B is correct. Lower order values come first. -1 is less than the default (0), so the item appears before all others.
MCQ 21
Why might flex-wrap be needed for a responsive grid?
  • A. It is not needed
  • B. Without it, items squeeze onto one line instead of wrapping to new rows
  • C. It enables justify-content
  • D. It unlocks gap
Answer: B
B is correct. Default is nowrap. Items shrink below their flex-basis instead of wrapping. flex-wrap: wrap is required for responsive layouts.
MCQ 22
Which combination grows items equally but respects a minimum size?
  • A. flex: 0
  • B. flex: 1
  • C. flex: 1 1 280px
  • D. flex: none
Answer: C
C is correct. 1 1 280px means grow, shrink, start at 280px. Items grow equally but start from a 280px minimum, ideal for card grids.
MCQ 23
How do you push ONE flex item to the far right while others stay on the left?
  • A. float: right
  • B. margin-left: auto on that item
  • C. text-align: right
  • D. order: 999
Answer: B
B is correct. margin-left: auto consumes all available space to the left of the item, shoving it to the right edge.
MCQ 24
Why is flexbox better than floats for layouts?
  • A. Flexbox is newer
  • B. Flexbox handles alignment, equal heights, ordering, and wrapping natively without hacks
  • C. Floats were removed from CSS
  • D. Floats do not work on mobile
Answer: B
B is correct. Floats required clearfix hacks and complex math. Flexbox was designed for layout and handles everything cleanly.
MCQ 25
What happens when you combine flex: 1 on 3 items but also set flex-shrink: 0 on one of them?
  • A. They all shrink equally
  • B. The shrink-0 item keeps its size while the others shrink
  • C. Nothing happens
  • D. flex: 1 overrides flex-shrink
Answer: B
B is correct. When space is tight, the shrink-0 item stays at its base size. The other items (with shrink > 0) absorb the compression.

Coding Challenges

Challenge 1: Center a Div

Easy
Create a page with a heading centered perfectly in the middle of the viewport using flexbox. The background should be a gradient.
Sample Input
Open the HTML file
Sample Output
A heading 'Hello, Aarav' centered both horizontally and vertically on a gradient background.
Use display: flex, justify-content: center, and align-items: center. Height must be 100vh.
<!DOCTYPE html>
<html>
<head><style>
  body { margin: 0; height: 100vh; font-family: Arial, sans-serif; background: linear-gradient(135deg, #a855f7, #06b6d4); display: flex; justify-content: center; align-items: center; color: white; }
  h1 { font-size: 56px; text-align: center; }
</style></head>
<body>
  <h1>Hello, Aarav</h1>
</body>
</html>

Challenge 2: Responsive Navbar

Easy
Build a flexbox navbar with a logo on the left, 3 navigation links in the middle with gap spacing, and a call-to-action button on the right. All items should be vertically centered.
Sample Input
Open the HTML file
Sample Output
A horizontal navbar with logo, links, and button distributed left/center/right.
Use display: flex with justify-content: space-between and align-items: center. Links use a nested flex with gap.
<!DOCTYPE html>
<html>
<head><style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, sans-serif; background: #f9fafb; }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 30px;
    background: white;
    border-bottom: 1px solid #e5e7eb;
  }
  .logo { font-weight: bold; font-size: 22px; color: #a855f7; }
  .links { display: flex; gap: 24px; list-style: none; }
  .links a { color: #4b5563; text-decoration: none; font-weight: 500; }
  .cta { padding: 10px 20px; background: #a855f7; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
</style></head>
<body>
  <nav class="nav">
    <div class="logo">Priya.dev</div>
    <ul class="links"><li><a href="#">Home</a></li><li><a href="#">Blog</a></li><li><a href="#">About</a></li></ul>
    <button class="cta">Sign Up</button>
  </nav>
</body>
</html>

Challenge 3: Responsive Card Grid

Medium
Create a grid of 6 cards using flexbox. Cards should be 260px minimum width, grow to fill available space, and wrap onto new rows on narrow screens.
Sample Input
Open the HTML file and resize the window
Sample Output
6 cards that flex to equal sizes and wrap responsively.
Use display: flex with flex-wrap: wrap and gap. Each card uses flex: 1 1 260px.
<!DOCTYPE html>
<html>
<head><style>
  * { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; padding: 30px; background: #f3f4f6; margin: 0; }
  h1 { text-align: center; color: #1a1a2e; margin-bottom: 24px; }
  .grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .card {
    flex: 1 1 260px;
    background: white;
    padding: 24px;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  }
  .card h3 { margin: 0 0 8px; color: #a855f7; }
  .card p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }
  .dot { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #a855f7, #06b6d4); margin-bottom: 12px; }
</style></head>
<body>
  <h1>Features by Kavya</h1>
  <div class="grid">
    <div class="card"><div class="dot"></div><h3>Fast</h3><p>Loads instantly on any device.</p></div>
    <div class="card"><div class="dot"></div><h3>Secure</h3><p>Encrypted end-to-end.</p></div>
    <div class="card"><div class="dot"></div><h3>Friendly</h3><p>Easy for kids to use.</p></div>
    <div class="card"><div class="dot"></div><h3>Proven</h3><p>500+ happy students.</p></div>
    <div class="card"><div class="dot"></div><h3>Fun</h3><p>Projects you will love.</p></div>
    <div class="card"><div class="dot"></div><h3>Smart</h3><p>Learn by doing.</p></div>
  </div>
</body>
</html>

Challenge 4: Pricing Cards

Medium
Build a pricing table with 3 plan cards side by side using flexbox. Each card has a title, price, feature list, and button. The middle card is highlighted. The buttons must line up at the bottom even if feature lists have different lengths.
Sample Input
Open the HTML file
Sample Output
Three pricing cards with aligned buttons regardless of feature list length.
Each card uses display: flex with flex-direction: column. Features have flex: 1 to push the button down.
<!DOCTYPE html>
<html>
<head><style>
  * { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; padding: 40px 20px; background: #f3f4f6; margin: 0; }
  h1 { text-align: center; color: #1a1a2e; margin-bottom: 30px; }
  .prices { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
  .plan { flex: 1 1 240px; max-width: 280px; background: white; padding: 28px 24px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); display: flex; flex-direction: column; text-align: center; }
  .plan h3 { margin: 0 0 8px; color: #6b7280; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; }
  .price { font-size: 40px; font-weight: 800; color: #1a1a2e; margin: 4px 0 20px; }
  .features { list-style: none; padding: 0; text-align: left; flex: 1; margin: 0 0 20px; }
  .features li { padding: 8px 0; border-bottom: 1px solid #f3f4f6; color: #4b5563; font-size: 14px; }
  .btn { padding: 12px; background: #1a1a2e; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
  .popular { border: 3px solid #a855f7; }
  .popular .btn { background: #a855f7; }
</style></head>
<body>
  <h1>Pick Your Plan by Meera</h1>
  <div class="prices">
    <div class="plan"><h3>Starter</h3><div class="price">Rs 499</div><ul class="features"><li>5 courses</li><li>Community</li></ul><button class="btn">Get</button></div>
    <div class="plan popular"><h3>Pro</h3><div class="price">Rs 1299</div><ul class="features"><li>All courses</li><li>Live classes</li><li>Project reviews</li><li>1-on-1 mentor</li></ul><button class="btn">Start Pro</button></div>
    <div class="plan"><h3>School</h3><div class="price">Rs 4999</div><ul class="features"><li>30 students</li><li>Dashboard</li><li>Certificates</li></ul><button class="btn">Contact</button></div>
  </div>
</body>
</html>

Challenge 5: Sticky Footer

Hard
Build a page with a header, short main content, and a footer. The footer must always be at the bottom of the viewport even when content is short. Use flexbox (no position: fixed).
Sample Input
Open the HTML file
Sample Output
A header, short content, and a footer pinned at the bottom of the viewport.
body must be a flex column with min-height 100vh. main must have flex: 1.
<!DOCTYPE html>
<html>
<head><style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; font-family: Arial, sans-serif; }
  body { min-height: 100vh; display: flex; flex-direction: column; background: #f3f4f6; }
  header { padding: 20px 30px; background: white; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
  header .logo { font-weight: bold; color: #a855f7; }
  main { flex: 1; padding: 40px 30px; max-width: 800px; margin: 0 auto; width: 100%; }
  main h1 { color: #1a1a2e; margin-bottom: 12px; }
  main p { color: #4b5563; line-height: 1.6; }
  footer { padding: 20px 30px; background: #1a1a2e; color: #94a3b8; text-align: center; font-size: 14px; }
</style></head>
<body>
  <header><div class="logo">Ishaan.dev</div><div>v1.0</div></header>
  <main><h1>Short Page</h1><p>Even with minimal content, the footer stays at the bottom.</p></main>
  <footer>Made by Ishaan - 2026</footer>
</body>
</html>

Challenge 6: Profile Stats Row

Hard
Build a profile page header with an avatar on the left, name and bio in the middle that grows to fill, and a stats row on the right with 3 numbers (Posts, Followers, Following). Use flexbox throughout.
Sample Input
Open the HTML file
Sample Output
A horizontal layout: avatar, growing middle section with name and bio, and a right-side stats block.
Use nested flex containers. Avatar has flex-shrink: 0. Middle uses flex: 1. Stats use flex with gap.
<!DOCTYPE html>
<html>
<head><style>
  * { box-sizing: border-box; }
  body { font-family: Arial, sans-serif; padding: 40px 20px; background: #f3f4f6; margin: 0; }
  .profile {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  .avatar {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-weight: bold;
  }
  .info { flex: 1; }
  .info h2 { margin: 0 0 4px; color: #1a1a2e; }
  .info p  { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }
  .stats {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
  }
  .stat { text-align: center; }
  .stat .num { font-size: 22px; font-weight: 800; color: #a855f7; }
  .stat .label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
</style></head>
<body>
  <div class="profile">
    <div class="avatar">RP</div>
    <div class="info">
      <h2>Riya Patel</h2>
      <p>Full stack developer. Loves building things. From Mumbai.</p>
    </div>
    <div class="stats">
      <div class="stat"><div class="num">128</div><div class="label">Posts</div></div>
      <div class="stat"><div class="num">2.5k</div><div class="label">Followers</div></div>
      <div class="stat"><div class="num">300</div><div class="label">Following</div></div>
    </div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass