MEMEPh. ideas that are worth sharing...
 » rendc.org  » rendc.com  » notedc.com

 Blogs

Programming

Frameworks

CSS Flex Container

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:

 

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 »

 

 

1
2
3

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

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:

Property Description
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
flex-flow A shorthand property for flex-direction and flex-wrap
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
CSS Flexbox CSS Flex Items