CSS Flexbox

Flexbox is a layout system that packs items in rows or columns.

Flex items may expand (flex) and shrink to fit the available space.

Flexbox helps with creating responsive layouts and websites.

Example

#

A responsive image gallery created with flexbox.
Depending on the screen size, 1, 2, or 3 columns display.


Learning Flexbox

#

To learn about flexbox, we've created these pages:

Using flexbox

A flexbox is a flex container that contains multiple flex items.

The items are packed into a row-first or column-first fashion.

To create a flex container use display:flex (see below).


More Examples

Flexbox, nowrap

This flex container holds 8 items packed in a single row.

1
2
3
4
5
6
7
8
<style>
  .flex-nowrap {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: nowrap;
  }

  .flex-nowrap > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex-nowrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

display:flex instructs the container to use flexbox layout.

By default, the items in the container do not wrap.

Flexbox, wrap

A flex container that packs 13 items in a row-first way.
Once a row fills it wraps.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .flex-wrap {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .flex-wrap > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>          

Flexbox Properties

A list of all flexbox properties for flexbox.

Property Description
display Specifies the type of display flow for the element
flex-wrap Specifies whether to wrap flex items when they run out of space
flex-direction Specifies the direction of the items in a flex container
flex-flow Shorthand for flex-direction and flex-wrap
gap Space between rows and columns.
row-gap Space between rows.
column-gap Space between columns.
justify-content Horizontally aligns items when they do not use all available space
align-items Vertically aligns the flex items when they don't use all available space
align-content Specifies that, instead of aligning flex items, it aligns flex lines
order Specifies the order of an item relative to the other items.
align-self Used on flex items. Overrides the container's align-items setting
flex-basis Specifies the initial width (the basis) of an item.
flex-grow Specifies how an item stretches (grows) in the flex container
flex-shrink Specifies how an item contracts (shrinks) in the flex container
flex Shorthand for flex-grow, flex-shrink, and flex-basis

Browser Support of Flexbox

This table shows when flexbox support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Guides