What does flex: 1 1 200px mean?

This shorthand sets flex-grow: 1 (grow to fill space), flex-shrink: 1 (shrink if needed), and flex-basis: 200px (start at 200px wide). Cards grow and shrink together.

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis (horizontal in a row). align-items aligns items along the cross axis (vertical in a row).

How does flex-wrap work?

By default flex items stay on one line and may overflow. flex-wrap: wrap allows items to move to the next line when they run out of space.

Format an HTML Flexbox Layout

Flexbox is the one-dimensional layout model that every web developer uses daily, even if they're not always conscious of it. Navigation bars, button groups, card rows, form layouts, and centered content all rely on flexbox. Understanding the model deeply — not just which properties produce which visual results but why — makes CSS layout feel intuitive rather than magical. This example shows two classic flexbox patterns together: a horizontal navigation bar and a row of responsive cards. The nav uses display: flex with align-items: center to vertically center the logo and links, and justify-content: space-between to push the logo to the left edge and the link group to the right edge. This space-between pattern is one of the most-used flexbox combinations in production UIs. The card row uses display: flex with gap: 1rem for spacing (replacing the old margin-based spacing approach), flex-wrap: wrap so cards move to the next line on narrow viewports rather than overflowing, and the flex shorthand flex: 1 1 200px on each card. Breaking down the shorthand: 1 is flex-grow (cards grow proportionally to fill available space), 1 is flex-shrink (cards shrink proportionally when space is tight), 200px is flex-basis (the starting width before growing or shrinking). With three cards in a 700px container, each starts at 200px and grows to fill the remaining space equally. Key conceptual distinction: the main axis in a flex row runs horizontally (left to right by default), and the cross axis runs perpendicular (vertically). justify-content aligns items along the main axis, while align-items aligns along the cross axis. This is why justify-content: space-between distributes cards horizontally, and align-items: center vertically centers content within the nav. The flex-direction: column variant (not shown but fundamental) makes the main axis vertical, which is useful for sidebar layouts, stacked form fields, and vertical navigation menus. With column direction, justify-content controls vertical distribution and align-items controls horizontal alignment — the opposite of the row direction. Real-world scenarios: any navigation bar on any website uses this exact pattern; a row of CTA buttons horizontally centered with space between them; a horizontal scrolling list of tags or filter chips. Customisation: change justify-content to flex-start (left-aligned), center (centered), flex-end (right-aligned), or space-around (equal space around each item) to see how the layout changes. Change flex-wrap: nowrap to prevent wrapping and add overflow: auto for horizontal scrolling.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    nav { display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; height: 60px; background: #1e293b; }
    nav a { color: #f1f5f9; text-decoration: none; margin-left: 1.5rem; }
    .row { display: flex; gap: 1rem; padding: 1.5rem; flex-wrap: wrap; }
    .card { flex: 1 1 200px; padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: 8px; }
  </style>
</head>
<body>
  <nav><span>My App</span><div><a href="/">Home</a><a href="/docs">Docs</a></div></nav>
  <div class="row">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>
</body>
</html>

[ open in HTML Formatter → ]

FAQ

What does flex: 1 1 200px mean?: This shorthand sets flex-grow: 1 (grow to fill space), flex-shrink: 1 (shrink if needed), and flex-basis: 200px (start at 200px wide). Cards grow and shrink together.
What is the difference between justify-content and align-items?: justify-content aligns items along the main axis (horizontal in a row). align-items aligns items along the cross axis (vertical in a row).
How does flex-wrap work?: By default flex items stay on one line and may overflow. flex-wrap: wrap allows items to move to the next line when they run out of space.

Related Examples

Format an HTML CSS Grid Layout

CSS Grid is the modern two-dimensional layout system that has transformed how de...

Format a Semantic HTML Page Structure

Semantic HTML is the practice of choosing HTML elements based on the meaning the...

Format a CSS Custom Properties File

CSS custom properties, commonly called CSS variables, are the foundation of mode...