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 standard layout model for one-dimensional UI components like navigation bars, button groups, and content rows. This example shows a responsive nav bar and a row of cards with consistent spacing. Formatting the HTML and inline styles makes alignment properties easy to read and compare. Use the flexbox generator tool to visually experiment with different justify-content and align-items values.

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 enables two-dimensional layouts with clean, semantic HTML. This example...

Format a Semantic HTML Page Structure

Semantic HTML uses elements that describe meaning rather than just presentation,...

Format a CSS Custom Properties File

CSS custom properties (variables) defined on :root create a design token system ...