CSS — Flexbox

Overview

Flexbox arranges items in a row/column with alignment control.

What you'll learn

• display:flex
• justify-content
• align-items
• gap
• flex:1

Syntax

.wrap{ display:flex; }

Example

.wrap{ display:flex; gap:12px; }
.box{ flex:1; padding:16px; border:1px solid #e5e7eb; border-radius:14px; text-align:center; }

Notes

• Use gap for spacing.
• flex:1 shares space equally.

  Try: Open the Playground: /en/playground/html