Earn income with your CSS skills

Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.

CSS Flexbox Items

CSS Flexbox Containers

CSS Flexbox Alignments

Flexbox is a layout system that arranges items in rows and columns.

Flexbox items are the immediate children in a flex container.

Items that are deeper than the children are not considered flex items.

Example

#

A flex container with 13 flex items.

<style>
  .flex-items {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .flex-items > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex-items">
  <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>

Using flex items

#

Direct child elements in a flex container automatically become flex items.

Each flex item can be controlled with these properties:

flex-grow
flex-shrink
flex-basis
flex
order

The flex-grow property

#

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The last item stretches to fill the remaining space.

<style>
  .flex-grow {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-grow > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-grow">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

For details on flex-grow, see our CSS flex-grow Property Reference.

The flex-shrink property

#

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

Item 2 is set to shrink. It shrinks relative to the other items when resizing the browser.

<style>
  .flex-shrink {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-shrink > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-shrink">
  <div>1</div>
  <div style="flex-shrink: 2">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

For details on flex-shrink, see our CSS flex-shrink Property Reference.

The flex-basis property

#

The flex-basis property specifies the initial width (the basis) of the item.

Item 2 has a 40% basis.

<style>
  .flex-basis {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-basis > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-basis">
  <div>1</div>
  <div style="flex-basis: 40%;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

For details on flex-basis, see our CSS flex-basis Property Reference.

The flex property

#

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

These items have default growth, shrink, and a 100px basis.

<style>
  .flex {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    flex: 0 1 100px;
  }
</style>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

The order property

#

The order property specifies the display order of a flex item.

These items are ordered as: 4, 2, 1, 3.

<style>
  .flex-order {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-order > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-order">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

For details on order, see our CSS order Property Reference.

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

#