Tutorial Image

CSS 3 Flexbox

.

Flex container: The flex container refers to the properties of the parent. It is declared by assigning the display property of an element to either flex or inline-flex.

Flex items: Flex item is basically the children of the flex container. A flex container contains more than one flex item.

Followings are the flex container properties: flex-direction,flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

The flex-direction Property

The flex-direction property is used to show the flex item alignment direction. By default flex-direction is row.

Followings are the flex direction properties: flex-direction: row;,flex-direction: row-reverse;,flex-direction: column;,flex-direction: column-reverse;

The flex-direction: row value displays the flex items horizontally(from left to right).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

flex-direction: row-reverse

The flex-direction: row-reverse value displays the flex items horizontally(from right to left).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

flex-direction: column

The flex-direction: column value displays the flex items vertically (from top to bottom).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

flex-direction: column-reverse

The flex-direction: column-reverse value displays the flex items vertically (from bottom to top).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

Flex Wrap

Flex wrap is used to display the flex item either in one row or multiple rows. It has the followings properties.

  • nowrap(default)
  • wrap(wrap in next line)
  • wrap-reverse(multiple line but in reverse from bottom to top).

flex-wrap: nowrap

nowrap – It is used to display flex items in one row. Please keep in mind that ,this is the by default behaviour.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

flex-wrap: wrap

wrap–This property is used to display flex items into multiple lines and items will wrap from top to bottom.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 5
Flex Item 6
Flex Item 7
Flex Item 8
Flex Item 9
Flex Item 10
Flex Item 11
Flex Item 12

General Syntax

Try it now

Source Code

Try it now

flex-wrap: wrap-reverse

wrap-reverse-Flex items will try to wrap in reverse direction means bottom to top.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 5
Flex Item 6
Flex Item 7
Flex Item 8
Flex Item 9
Flex Item 10
Flex Item 11
Flex Item 12

General Syntax

Try it now

Source Code

Try it now

The Flex Flow Property

It is a shorthand property of flex-direction and flex-wrap properties.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4
Flex Item 5
Flex Item 6
Flex Item 7
Flex Item 8
Flex Item 9
Flex Item 10
Flex Item 11
Flex Item 12

General Syntax

Try it now

Source Code

Try it now

Horizontal Alignment Of Flex Item

Please keep in mind that by default flex-direction is row.

The justify-content Property

The justify-content property is used to align the flex items along the horizontal direction or on the main-axis or on the x-axis.

Followings are the value of justify-content property: justify-content: center,justify-content: flex-start,justify-content: flex-end,justify-content: space-around,justify-content: space-between

justify-content: center

The justify-content: center value is used to align flex item to the center of main-axis or x-axis or horizontal direction.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

justify-content: start

The justify-content: flex-start value is used to align flex item to the beginning of main-axis or x-axis or horizontal direction. Please keep in mind that this is the default value of justify-content.

General Syntax

Try it now

Source Code

Try it now

justify-content: flex-end

The justify-content: flex-end value is used to align flex item to the end of main-axis or x-axis or horizontal direction.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

justify-content: space-around

The justify-content: space-around value is used to align flex item with space before, between, and after the lines along the main-axis or x-axis or horizontal direction.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

justify-content: space-between

The justify-content: space-between value is used to align flex item space between the lines along the main-axis or x-axis or horizontal direction.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

The align-items Property

The align-items property is used to align the flex items along the cross axis(perpendicular to main axis) or y-axis or vertical to the main axis. Please keep in mind that align-items is the property of the flex container.

The align-self property is used to align the individual flex item along the cross axis or Y-axis. Please keep in mind that align-self is the property of the flex item.

Followings are the value of align-items:

  • flex-start
  • center
  • flex-end
  • stretch
  • baseline

align-items:flex-start

The align-items:flex-start value is used to place flex items at the start of the cross axis or Y-axis or vertical to main axis(x-axis).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

align-items: center

The align-items: center value is used to place flex items at the center of the cross axis or Y-axis or vertical to the main axis(x-axis).

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

align-items: flex-end

The align-items: flex-end value is used to place flex items at the end of the cross axis or Y-axis or vertical to the main axis(x-axis) with equal amounts of free space at both ends.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

align-items: stretch

The align-items: stretch value is used to fill the current row or column unless prevented by the minimum and maximum width or height. Please keep in mind that this is the default value of align-items.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

align-items: baseline

The align-items: baseline value is used to align each flex item with the baseline of the flex item with the largest font size.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

The align-content Property

The align-content property is used to align the flex lines of the flex container along the main axis.

Followings are the value of align-content: stretch, center, space-around , space-between space-evenly , flex-start , flex-end.

align-content: stretch

The align-content: stretch value is used to stretch the flex lines to take up the remaining space. This is the default value of align-content.

Flex Item 1
Flex Item 2
Flex Item 3

General Syntax

Try it now

Source Code

Try it now

align-content: flex-start

The align-content: flex-start value is used to display the flex lines at the start of the flex container.

General Syntax

Try it now

Source Code

Try it now

align-content: center

The align-content: center value is used to display the flex lines at the center of the flex container.

General Syntax

Try it now

Source Code

Try it now

align-content: flex-end

The align-content: flex-end value is used to display the flex lines at the end of the flex container.

General Syntax

Try it now

Source Code

Try it now

align-content:space-between

The align-content:space-between value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them. There will be no extra space before the first flex item and after the last flex item.

General Syntax

Try it now

Source Code

Try it now

align-content:space-around

The align-content:space-around value is used to align the flex items along the main axis in such a way that each item has an equal amount of space around it.

General Syntax

Try it now

Source Code

Try it now

align-content:space-evenly

The align-content:space-evenly value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them There will be no extra space before the first flex item and after the last flex item. So, the space on the left & right sides of each item should be equal to the width of the item.

General Syntax

Try it now

Source Code

Try it now