--- title: "CSS Flexbox Complete Guide - display: flex, justify-content, align-items, gap, flex-wrap | Modern Age Coders" description: "Master CSS Flexbox. Learn display: flex, flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink, flex-basis, order, align-self. Build responsive navbars, card grids, pricing tables, and perfectly centered layouts. 62+ practice questions." slug: flexbox-complete-guide canonical: https://learn.modernagecoders.com/resources/html-and-css/flexbox-complete-guide/ category: "HTML and CSS" keywords: ["css flexbox", "display flex", "justify-content", "align-items", "flex-direction", "flex-wrap", "gap css", "flex-grow", "flex-basis", "responsive navbar flexbox"] --- # Flexbox - The Complete Guide **Difficulty:** Intermediate **Reading time:** 45 min **Chapter:** 15 **Practice questions:** 62 ## What Is Flexbox? Flexbox (Flexible Box Layout) is a CSS layout system designed to arrange items in a single row or column. With one line -- `display: flex` -- a container's direct children become flex items that you can align, distribute, wrap, and order with a handful of intuitive properties. Before flexbox, centering a div was a running joke. With flexbox, it is two lines. Navbars, card grids, pricing tables, form layouts, sidebar + content layouts -- all become dramatically simpler. Flexbox is arguably the single most important CSS feature of the last 15 years. ``` .container { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ } /* Any children are now perfectly centered. Done. */ ``` ## Why Is Flexbox So Important? ### 1. It Solves Layout Problems That Used to Be Painful Centering a div was hard. Equal-height columns were hard. Spacing items evenly was hard. Building a responsive navbar was hard. Flexbox makes all of these trivial. A few properties replace hundreds of lines of float hacks and table tricks. ### 2. Every Modern Website Uses It Open any modern website in DevTools. You will see `display: flex` everywhere -- navbars, buttons, form groups, card layouts, section headers. Flexbox is the default layout tool for one-dimensional arrangements. ### 3. It Is Responsive by Default Flex items automatically adjust to available space. Add `flex-wrap: wrap` and they flow onto new rows when the container gets narrow. Combined with `flex: 1`, you get responsive layouts with almost no effort. ### 4. It Makes CSS Fun Again Once you understand flexbox, layout becomes intuitive. You stop fighting CSS and start actually designing. This is the chapter where CSS clicks for most learners. ## Detailed Explanation ### 1. Flex Container vs Flex Items Apply `display: flex` to a PARENT element. The parent becomes a flex container. Its DIRECT children become flex items. Flexbox properties are split into two groups: - **Container properties**: flex-direction, justify-content, align-items, flex-wrap, gap, align-content - **Item properties**: flex-grow, flex-shrink, flex-basis, flex, order, align-self ### 2. Main Axis vs Cross Axis This is the most important concept. Flexbox has two axes: - **Main axis**: the direction items are laid out in (horizontal by default) - **Cross axis**: perpendicular to the main axis (vertical by default) When you change `flex-direction`, the axes rotate. In a row, the main axis is horizontal. In a column, the main axis is vertical. This matters because `justify-content` aligns along the MAIN axis and `align-items` aligns along the CROSS axis. ### 3. flex-direction ``` .container { display: flex; flex-direction: row; /* default: left to right */ flex-direction: row-reverse; /* right to left */ flex-direction: column; /* top to bottom */ flex-direction: column-reverse; /* bottom to top */ } ``` ### 4. justify-content (MAIN AXIS) Distributes items along the main axis. ``` justify-content: flex-start; /* default: packed at start */ justify-content: flex-end; /* packed at end */ justify-content: center; /* centered */ justify-content: space-between; /* first at start, last at end, equal space between */ justify-content: space-around; /* equal space around each item */ justify-content: space-evenly; /* equal space between AND at edges */ ``` Memorize space-between for navbars (logo left, links right) and center for everything else. ### 5. align-items (CROSS AXIS) Aligns items perpendicular to the main axis. ``` align-items: stretch; /* default: fill cross axis */ align-items: flex-start; /* top (in a row) */ align-items: flex-end; /* bottom (in a row) */ align-items: center; /* vertically centered (in a row) */ align-items: baseline; /* aligned to text baselines */ ``` ### 6. The Holy Grail: Centering ``` .center { display: flex; justify-content: center; align-items: center; /* Anything inside is perfectly centered -- horizontally AND vertically */ } ``` This one pattern solves the historical 'center a div' problem. Remember it. ### 7. flex-wrap By default, flex items try to fit on a single line, even if they have to shrink. flex-wrap lets them wrap onto multiple lines. ``` flex-wrap: nowrap; /* default: all on one line */ flex-wrap: wrap; /* wrap to new lines when needed */ flex-wrap: wrap-reverse; ``` ### 8. gap The modern replacement for margin between items. `gap` works inside flex and grid containers and is much simpler than setting margins. ``` .container { display: flex; gap: 16px; /* space between items */ gap: 16px 24px; /* row-gap | column-gap */ } ``` Use gap. Stop using margins on flex items. Trust me. ### 9. align-content Only applies when `flex-wrap` causes multiple lines. Controls how those LINES are distributed along the cross axis. ``` align-content: flex-start; align-content: center; align-content: space-between; align-content: space-around; ``` ### 10. Flex Item Properties #### flex-grow How much an item grows to fill extra space. Default is 0 (do not grow). Values are ratios: `flex-grow: 2` grows twice as fast as `flex-grow: 1`. ``` .main { flex-grow: 1; } /* takes any extra space */ .sidebar { flex-grow: 0; } /* keeps its natural size */ ``` #### flex-shrink How much an item shrinks when there is not enough space. Default is 1 (can shrink). Set to 0 to prevent shrinking. ``` .logo { flex-shrink: 0; } /* never shrinks */ ``` #### flex-basis The initial size of the item before grow/shrink is applied. ``` .item { flex-basis: 200px; } /* starts at 200px, then grows or shrinks */ ``` #### flex Shorthand Sets grow, shrink, and basis in one line. The common values you will actually use: ``` flex: 1; /* = flex: 1 1 0 -- grow to fill, shrink if needed, start at 0 */ flex: 0 0 auto; /* no grow, no shrink, use content size */ flex: 1 0 200px; /* grow, no shrink, start at 200px */ flex: none; /* no grow, no shrink, use content size */ ``` Most of the time you just use `flex: 1` on items that should fill available space. #### order Reorder items visually without changing the HTML. ``` .first { order: 1; } .second { order: 2; } .hero { order: -1; } /* shows first regardless of source order */ ``` #### align-self Override align-items for a single flex item. ``` .special { align-self: flex-end; } /* aligned to bottom while others center */ ``` ### 11. Common Flexbox Patterns #### Centering everything ``` display: flex; justify-content: center; align-items: center; ``` #### Navbar (logo left, links right) ``` display: flex; justify-content: space-between; align-items: center; ``` #### Equal-width card grid ``` .grid { display: flex; gap: 20px; } .card { flex: 1; } ``` #### Sticky footer ``` body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } ``` ## Code Examples ### Perfect Centering (The Holy Grail) ```html

Hi, I'm Aarav

Perfectly centered horizontally and vertically with flexbox.

``` Three lines of flexbox replace the decade-long struggle of centering an element. `display: flex` makes the container a flex container. `justify-content: center` centers along the main axis (horizontal). `align-items: center` centers along the cross axis (vertical). **Output:** ``` A full-screen gradient hero with a heading and tagline perfectly centered both horizontally and vertically. ``` ### Responsive Navbar ```html

Welcome, friend!

This page has a flexbox navbar: logo left, links center, button right.

``` The nav uses `justify-content: space-between` to push the logo left, button right, with the links in between. The links themselves are a nested flex container with `gap: 24px` for even horizontal spacing. This is the standard navbar pattern. **Output:** ``` A modern navbar with a purple logo on the left, navigation links in the middle, and a purple sign-up button on the right. ``` ### Equal-Width Card Grid ```html

Why Learn with Us

Live Mentors

Real teachers, weekly classes, and doubt sessions.

Projects

Build real apps you can show off on your portfolio.

Flexible

Learn at your own pace with recorded backup classes.

Community

Meet other kids who love coding. By Kavya.

``` `flex: 1 1 240px` means each card grows (1), shrinks (1), and has a base width of 240px. With `flex-wrap: wrap`, cards reflow onto new rows when the container gets narrower. Resize the window to see the responsive behavior. **Output:** ``` A responsive grid of 4 feature cards that flex to equal widths on wide screens and wrap to multiple rows on narrow screens. ``` ### Pricing Cards Layout ```html

Pick Your Plan

Starter

Rs 499 /mo
POPULAR

Pro

Rs 1,299 /mo

School

Rs 4,999 /mo
``` The outer container uses `display: flex` with gap and wrap. Each plan is also a flex container with `flex-direction: column` so the button can be pushed to the bottom using `margin-top: auto`. This ensures buttons line up even if feature lists have different lengths. **Output:** ``` Three pricing cards side by side. The middle one is highlighted and slightly larger. All buttons align to the bottom regardless of feature list length. ``` ### Sticky Footer Layout ```html
v1.0

Short Page

Even with very little content, the footer stays at the bottom of the viewport because of flexbox.

This works by making body a flex column that is at least 100vh tall. The main element grows (flex: 1) to fill all leftover space, pushing the footer down.

``` The body is a flex column with `min-height: 100vh`. The main element has `flex: 1`, meaning it grows to fill any leftover vertical space. The footer is pushed to the bottom even when the page has minimal content. This replaces the old sticky footer hacks. **Output:** ``` A page with a header, short main content, and a footer that is always pinned to the bottom of the viewport even with little content. ``` ### Order and align-self ```html

order: rearrange visually without changing HTML. Cyan is first, amber is last.

A
B
C
D
E

align-self: override align-items on individual items

Top
Mid
Tall
Bot
Mid
``` `order` lets you visually reorder flex items without touching the HTML. Items with lower order come first (default is 0). `align-self` overrides `align-items` for individual flex items -- the Top item goes to the top of the container while others stay centered. **Output:** ``` Two rows of colored boxes. The first shows reordering (cyan first, amber last), the second shows individual items aligned to the top, center, and bottom. ``` ## Common Mistakes ### Applying Flex Properties to the Wrong Element **Wrong:** ``` .item { display: flex; justify-content: center; } /* This makes .item a flex container for ITS children. */ /* It does not affect how .item itself is aligned. */ ``` display: flex on an item does not move the item itself. It only affects the item's children. **Correct:** ``` .container { display: flex; justify-content: center; /* aligns .item within the container */ } .item { /* whatever */ } ``` display: flex is always applied to the parent. The parent's children are the flex items that get aligned. Put display: flex on the thing containing what you want to align. ### Confusing justify-content and align-items **Wrong:** ``` .row { display: flex; align-items: center; /* vertically centers, NOT horizontally */ justify-content: center; /* horizontally centers, NOT vertically */ } /* Swapping these causes confusion in flex-direction: column */ ``` In a row, justify-content is horizontal and align-items is vertical. In a column, they SWAP -- justify-content becomes vertical and align-items becomes horizontal. This trips up beginners. **Correct:** ``` /* Always think: justify-content = MAIN axis, align-items = CROSS axis */ /* The axes rotate with flex-direction. */ ``` Never memorize 'justify = horizontal'. Memorize 'justify = main axis'. Then remember: row main axis is horizontal, column main axis is vertical. ### Using Margins Instead of gap **Wrong:** ``` .item { margin-right: 20px; /* extra margin on the last item too */ } .item:last-child { margin-right: 0; } /* ugly fix */ ``` Margins on flex items create uneven spacing at the edges and require last-child hacks. **Correct:** ``` .container { display: flex; gap: 20px; /* clean, simple, works everywhere */ } ``` gap is supported in all modern browsers. It only adds space BETWEEN items (not at the edges) and requires no hacks. Always use gap for spacing flex items. ### Forgetting flex-wrap on Responsive Layouts **Wrong:** ``` .grid { display: flex; } .card { flex: 1 1 240px; } /* On narrow screens, cards shrink to tiny widths instead of wrapping */ ``` Without flex-wrap, items try to squeeze onto a single line, shrinking past their flex-basis. **Correct:** ``` .grid { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 240px; } ``` Add flex-wrap: wrap whenever you want items to flow onto new lines on smaller screens. It is essential for responsive card grids. ## Summary - display: flex makes an element a flex container. Its direct children become flex items that can be aligned, distributed, wrapped, and ordered with a few properties. - Flexbox has a MAIN axis (direction of flow, horizontal by default) and a CROSS axis (perpendicular). flex-direction changes which axis is which. - justify-content aligns items along the MAIN axis. Values: flex-start, flex-end, center, space-between (for navbars), space-around, space-evenly. - align-items aligns items along the CROSS axis. Values: stretch (default), flex-start, flex-end, center (for vertical centering), baseline. - The holy grail of centering: display: flex; justify-content: center; align-items: center. Centers any child both horizontally and vertically. - flex-wrap: wrap lets items flow onto multiple lines when they do not fit. Essential for responsive card grids. - gap is the modern way to space flex items. Works inside the container, adds space only between items (not at edges), and is far simpler than using margins. - flex-grow, flex-shrink, and flex-basis control how items size. The flex shorthand combines them. flex: 1 is the most common value -- it means grow to fill available space. - order lets you visually rearrange items without changing the HTML. Useful for responsive layouts where the visual order differs from the source order. - Common patterns to memorize: centering (justify + align center), navbar (space-between), card grid (flex: 1 + flex-wrap), sticky footer (flex column + flex: 1 on main). ## Related Topics - undefined - undefined - undefined --- *Source: https://learn.modernagecoders.com/resources/html-and-css/flexbox-complete-guide/* *Practice questions: https://learn.modernagecoders.com/resources/html-and-css/flexbox-complete-guide/practice/*