~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/4css-flexbox

# CSS Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

## Flex Container

Enable flexbox on a parent element:

```css
.container {
  display: flex;
}
```

## Flex Direction

Controls the direction of items:

```css
.container {
  display: flex;
  flex-direction: row;            /* Horizontal (default) */
  flex-direction: row-reverse;    /* Horizontal reversed */
  flex-direction: column;         /* Vertical */
  flex-direction: column-reverse; /* Vertical reversed */
}
```

## Justify Content

Aligns items along the main axis:

```css
.container {
  display: flex;
  justify-content: flex-start;    /* Start (default) */
  justify-content: flex-end;      /* End */
  justify-content: center;        /* Center */
  justify-content: space-between; /* Space between items */
  justify-content: space-around;  /* Space around items */
  justify-content: space-evenly;  /* Equal space */
}
```

## Align Items

Aligns items along the cross axis:

```css
.container {
  display: flex;
  align-items: stretch;           /* Stretch to fill (default) */
  align-items: flex-start;        /* Top */
  align-items: flex-end;          /* Bottom */
  align-items: center;            /* Center */
  align-items: baseline;          /* Align text baselines */
}
```

## Align Content

Aligns multiple lines (when flex-wrap is enabled):

```css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: center;
  align-content: space-between;
}
```

## Flex Wrap

Allows items to wrap to multiple lines:

```css
.container {
  display: flex;
  flex-wrap: nowrap;              /* Single line (default) */
  flex-wrap: wrap;                /* Wrap to multiple lines */
  flex-wrap: wrap-reverse;        /* Wrap reversed */
}
```

## Flex Items

Properties for individual items:

```css
.item {
  flex-grow: 1;       /* How much item should grow */
  flex-shrink: 1;     /* How much item should shrink */
  flex-basis: auto;   /* Initial size */
  flex: 1;            /* Shorthand: grow shrink basis */

align-self: center; /* Override container's align-items */
  order: 1;           /* Change visual order */
}
```

## Complete Example: Navigation

```css
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.nav-links a:hover {
  color: #3498db;
}
```

```html
<nav class="nav">
  <div class="nav-logo">MySite</div>
  <ul class="nav-links">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

## Complete Example: Card Grid

```css
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.card-content {
  flex-grow: 1;
}

.card-button {
  align-self: flex-end;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
}
```

```html
<div class="card-grid">
  <div class="card">
    <h3>Card 1</h3>
    <p class="card-content">Content here</p>
    <button class="card-button">Click</button>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p class="card-content">Longer content that takes more space</p>
    <button class="card-button">Click</button>
  </div>
</div>
```

## Complete Example: Holy Grail Layout

```css
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-content {
  flex: 1;
  padding: 20px;
}

.holy-grail-sidebar {
  width: 200px;
  padding: 20px;
  background-color: #f5f5f5;
}

.holy-grail-footer {
  padding: 20px;
  background-color: #333;
  color: white;
  text-align: center;
}
```

```html
<div class="holy-grail">
  <header class="holy-grail-header">
    <h1>Header</h1>
  </header>
  <div class="holy-grail-body">
    <nav class="holy-grail-sidebar">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <main class="holy-grail-content">
      <h2>Main Content</h2>
      <p>Content goes here...</p>
    </main>
    <aside class="holy-grail-sidebar">
      <h3>Sidebar</h3>
      <p>Side content</p>
    </aside>
  </div>
  <footer class="holy-grail-footer">
    <p>Footer</p>
  </footer>
</div>
```

## Flexbox Cheat Sheet

Item Properties:
  flex: grow shrink basis
  align-self: auto | flex-start | flex-end | center | stretch
  order: number
```

## Best Practices

1. **Use gap instead of margins** — Cleaner spacing
2. **Set min-width on flex items** — Prevents items from shrinking too small
3. **Use flex-wrap for responsive** — Items wrap on smaller screens
4. **Avoid fixed widths** — Let flex handle sizing
5. **Test on different screens** — Ensure responsiveness

## Common Mistakes

1. **Not setting display: flex** — Items won't flex
2. **Using flex on items, not container** — Properties go on parent
3. **Forgetting flex-wrap** — Items overflow on small screens
4. **Not setting min-width** — Items shrink too much
5. **Using margin for gaps** — Gap property is cleaner

No changes yet

cancel