CSS Flexible Box Layout Module Level 1

https://www.w3.org/TR/css-flexbox-1/
Admin
CSS Flexible Box Layout Module Level 1 specifies a CSS box model optimized for user interface...
Tokens:33,432
Snippets:213
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Flex lines wrapping example

Source: https://www.w3.org/TR/css-flexbox-1

CSS and HTML for a flex container with four items that wrap into multiple lines because they do not fit side-by-side. The container is 300px wide and each item is 80px wide.

```css
#flex {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}
.item {
  width: 80px;
}
```

```html
<div id="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
```

--------------------------------

### HTML structure for Holy Grail Layout

Source: https://www.w3.org/TR/css-flexbox-1

HTML structure for a typical page with header, main content, navigation, aside, and footer. This is the source markup used in the Holy Grail Layout example.

```html
<!DOCTYPE html>
<header>...</header>
<main>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</main>
<footer>...</footer>
```

--------------------------------

### Flex layout catalog example with CSS and HTML

Source: https://www.w3.org/TR/css-flexbox-1

CSS and HTML for a product catalog where each item is a flex container with equal height, image pulled to top via order, and purchase button pushed to bottom with auto margin. The CSS uses display: flex, flex-flow: row wrap, order: -1, align-self: center, and margin-top: auto. The HTML shows the logical source order with title, description, and image, which is then visually reordered.

```css
#deals {
  display: flex;        /* Flex layout so items have equal height  */
  flex-flow: row wrap;  /* Allow items to wrap into multiple lines */
}
.sale-item {
  display: flex;        /* Lay out each item using flex layout */
  flex-flow: column;    /* Lay out item’s contents vertically  */
}
.sale-item > img {
  order: -1;            /* Shift image before other content (in visual order) */
  align-self: center;   /* Center the image cross-wise (horizontally)         */
}
.sale-item > button {
  margin-top: auto;     /* Auto top margin pushes button to bottom */
}

```

```html
<section id="deals">
  <section class="sale-item">
    <h1>Computer Starter Kit</h1>
    <p>This is the best computer money can buy, if you don’t have much money.
    <ul>
      <li>Computer
      <li>Monitor
      <li>Keyboard
      <li>Mouse
    </ul>
    <img src="images/computer.jpg"
         alt="You get: a white computer with matching peripherals.">
    <button>BUY NOW</button>
  </section>
  <section class="sale-item">
    …
  </section>
  …
</section>

```

--------------------------------

### Writing-mode sensitivity of flex-flow

Source: https://www.w3.org/TR/css-flexbox-1

Two CSS examples showing how flex-flow directions are writing-mode sensitive. The first uses horizontal-tb (English), the second uses vertical-rl (Japanese), demonstrating that row wrap lays out from top to bottom in vertical writing mode.

```css
flex-flow: row wrap;          
writing-mode: horizontal-tb;
```

```css
flex-flow: row wrap;          
writing-mode: vertical-rl;
```

--------------------------------

### Collapse navigation submenus with visibility:collapse in a flex layout

Source: https://www.w3.org/TR/css-flexbox-1

Shows a responsive two-column layout where the main content takes remaining space and navigation submenus are dynamically collapsed using visibility:collapse without affecting the sidebar width. The media query applies only when there is enough room, and the nav items use flex layout to enable the collapse behavior.

```css
@media (min-width: 60em) {
  /* two column layout only when enough room (relative to default text size) */
  div { display: flex; }
  #main {
    flex: 1;         /* Main takes up all remaining space */
    order: 1;        /* Place it after (to the right of) the navigation */
    min-width: 12em; /* Optimize main content area sizing */
  }
}
/* menu items use flex layout so that visibility:collapse will work */
nav > ul > li {
  display: flex;
  flex-flow: column;
}
/* dynamically collapse submenus when not targeted */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}
```

--------------------------------

### Media query for narrow screens

Source: https://www.w3.org/TR/css-flexbox-1

Media query that switches the flex container to a single column layout on narrow screens (max-width: 600px) and resets the order and width of the flex items to their document order.

```css
@media all and (max-width: 600px) {
  /* Too narrow to support three columns */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* Return them to document order */
    order: 0; width: auto;
  }
}
```
Tokens:
Raw