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.
A responsive image gallery created with flexbox.
Depending on the screen size, 1, 2, or 3 columns display.
To learn about flexbox, we've created these pages:
Flexbox (this page)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).
This flex container holds 8 items packed in a single row.
<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.
A flex container that packs 13 items in a row-first way.
Once a row fills it wraps.
<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>
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 |
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 |
