CSS Flexbox

❮ PreviousNext ❯


1

2

3

4

5

6

7

8

Try it Yourself »


CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.


Browser Support

The flexbox properties are supported in all modern browsers.

29.011.022.01048

Flexbox Elements

To start using the Flexbox model, you need to first define a flex container.

1

2

3

The element above represents a flex container (the blue area) with three flex items.

Example

A flex container with three flex items:

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div>3</div>
</div>

Try it Yourself »

You will learn more about flex containers and flex items in the next chapters.

❮ PreviousNext ❯

CSS Flex Container

❮ PreviousNext ❯


Parent Element (Container)

Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items:

1

2

3

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
  display: flex;
}

Try it Yourself »

The flex container properties are:


ADVERTISEMENT

https://487ac822d397dccc40d7dee50ba5f38a.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.

1

2

3

Example

The column value stacks the flex items vertically (from top to bottom):

.flex-container {
  display: flex;
  flex-direction: column;
}

Try it Yourself »

Example

The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Try it Yourself »

Example

The row value stacks the flex items horizontally (from left to right):

.flex-container {
  display: flex;
  flex-direction: row;
}

Try it Yourself »

Example

The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Try it Yourself »


The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not.

The examples below have 12 flex items, to better demonstrate the flex-wrap property.

1

2

3

4

5

6

7

8

9

10

11

12

Example

The wrap value specifies that the flex items will wrap if necessary:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Try it Yourself »

Example

The nowrap value specifies that the flex items will not wrap (this is default):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Try it Yourself »

Example

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Try it Yourself »


The flex-flow Property

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

Example

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Try it Yourself »


The justify-content Property

The justify-content property is used to align the flex items:

1

2

3

Example

The center value aligns the flex items at the center of the container:

.flex-container {
  display: flex;
  justify-content: center;
}

Try it Yourself »

Example

The flex-start value aligns the flex items at the beginning of the container (this is default):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Try it Yourself »

Example

The flex-end value aligns the flex items at the end of the container:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Try it Yourself »

Example

The space-around value displays the flex items with space before, between, and after the lines:

.flex-container {
  display: flex;
  justify-content: space-around;
}

Try it Yourself »

Example

The space-between value displays the flex items with space between the lines:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Try it Yourself »


The align-items Property

The align-items property is used to align the flex items.

1

2

3

In these examples we use a 200 pixels high container, to better demonstrate the align-items property.

Example

The center value aligns the flex items in the middle of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Try it Yourself »

Example

The flex-start value aligns the flex items at the top of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Try it Yourself »

Example

The flex-end value aligns the flex items at the bottom of the container:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Try it Yourself »

Example

The stretch value stretches the flex items to fill the container (this is default):

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Try it Yourself »

Example

The baseline value aligns the flex items such as their baselines aligns:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Note: the example uses different font-size to demonstrate that the items gets aligned by the text baseline:


1

2

3

4

Try it Yourself »


The align-content Property

The align-content property is used to align the flex lines.

1

2

3

4

5

6

7

8

9

10

11

12

In these examples we use a 600 pixels high container, with the flex-wrap property set to wrap, to better demonstrate the align-content property.

Example

The space-between value displays the flex lines with equal space between them:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Try it Yourself »

Example

The space-around value displays the flex lines with space before, between, and after them:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Try it Yourself »

Example

The stretch value stretches the flex lines to take up the remaining space (this is default):

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Try it Yourself »

Example

The center value displays display the flex lines in the middle of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Try it Yourself »

Example

The flex-start value displays the flex lines at the start of the container:

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Try it Yourself »

Example

The flex-end value displays the flex lines at the end of the container: 

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Try it Yourself »


Perfect Centering

In the following example we will solve a very common style problem: perfect centering.

SOLUTION: Set both the justify-content and align-items properties to center, and the flex item will be perfectly centered:

Example

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Try it Yourself »


The CSS Flexbox Container Properties

The following table lists all the CSS Flexbox Container properties:

PropertyDescription
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
align-itemsVertically aligns the flex items when the items do not use all available space on the cross-axis
displaySpecifies the type of box used for an HTML element
flex-directionSpecifies the direction of the flexible items inside a flex container
flex-flowA shorthand property for flex-direction and flex-wrap
flex-wrapSpecifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
justify-contentHorizontally aligns the flex items when the items do not use all available space on the main-axis

❮ PreviousNext ❯

CSS Flex Items

❮ PreviousNext ❯


Child Elements (Items)

The direct child elements of a flex container automatically becomes flexible (flex) items.

1

2

3

4

The element above represents four blue flex items inside a grey flex container.

Example

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

Try it Yourself »

The flex item properties are:


The order Property

The order property specifies the order of the flex items.

1

2

3

4

The first flex item in the code does not have to appear as the first item in the layout.

The order value must be a number, default value is 0.

Example

The order property can change the order of the flex items:

<div class=”flex-container”>
 <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>

Try it Yourself »


The flex-grow Property

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

1

2

3

The value must be a number, default value is 0.

Example

Make the third flex item grow eight times faster than the other flex items:

<div class=”flex-container”>
 <div style=”flex-grow: 1″>1</div>
 <div style=”flex-grow: 1″>2</div>
 <div style=”flex-grow: 8″>3</div>
</div>

Try it Yourself »


ADVERTISEMENT

https://73d8a67e8479a6b2e1ba2f2e9d9cca6c.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

The flex-shrink Property

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

1

2

3

4

5

6

7

8

9

10

The value must be a number, default value is 1.

Example

Do not let the third flex item shrink as much as the other flex items:

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div style=”flex-shrink: 0″>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</div>

Try it Yourself »


The flex-basis Property

The flex-basis property specifies the initial length of a flex item.

1

2

3

4

Example

Set the initial length of the third flex item to 200 pixels:

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div style=”flex-basis: 200px”>3</div>
 <div>4</div>
</div>

Try it Yourself »


The flex Property

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

Example

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div style=”flex: 0 0 200px”>3</div>
 <div>4</div>
</div>

Try it Yourself »


The align-self Property

The align-self property specifies the alignment for the selected item inside the flexible container.

The align-self property overrides the default alignment set by the container’s align-items property.

1

2

3

4

In these examples we use a 200 pixels high container, to better demonstrate the align-self property:

Example

Align the third flex item in the middle of the container:

<div class=”flex-container”>
 <div>1</div>
 <div>2</div>
 <div style=”align-self: center”>3</div>
 <div>4</div>
</div>

Try it Yourself »

Example

Align the second flex item at the top of the container, and the third flex item at the bottom of the container:

<div class=”flex-container”>
 <div>1</div>
 <div style=”align-self: flex-start”>2</div>
 <div style=”align-self: flex-end”>3</div>
 <div>4</div>
</div>

Try it Yourself »


The CSS Flexbox Items Properties

The following table lists all the CSS Flexbox Items properties:

PropertyDescription
align-selfSpecifies the alignment for a flex item (overrides the flex container’s align-items property)
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basisSpecifies the initial length of a flex item
flex-growSpecifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrinkSpecifies how much a flex item will shrink relative to the rest of the flex items inside the same container
orderSpecifies the order of the flex items inside the same container

❮ PreviousNext ❯

CSS Flex Responsive

❮ PreviousNext ❯


Responsive Flexbox

You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.

Laptop and Desktops:

1

2

3

Mobile phones and Tablets:

1

2

3

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):

Example

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout – makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Try it Yourself »

Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work:

Example

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout – makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Try it Yourself »


ADVERTISEMENT

https://1628d6d4b18d02cd8251396a5acd01a8.safeframe.googlesyndication.com/safeframe/1-0-38/html/container.html

Responsive Image Gallery using Flexbox

Use flexbox to create a responsive image gallery that varies between four, two or full-width images, depending on screen size:https://www.w3schools.com/howto/tryhow_css_image_grid_responsive.htm Try it Yourself »


Responsive Website using Flexbox

Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:https://www.w3schools.com/css/trycss3_flexbox_website_ifr.htm Try it Yourself »

❮ PreviousNext ❯