UIkit Flex

UIkit Flex

Uikit Flex is used to create one dimension layout which is very helpful for aligning and distributing the space among items in a container. It is used to align the item in either a horizontal or a vertical direction.

How To Use Flexbox

Add .uk-flex class to the container and place all the child elements i.e flex items inside the container.

Please keep in mind that all the flex item is aligned on the left. The width of the flex item depends upon the available content inside the flex item and its height will be always matched.

Example

Column1

Column2

Column3

Column4

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Column1

Column2

Column3

Column4

Flex Item:Horizontal Alignment

Followings are the predefined class that is used to align flex items in the horizontal direction.

  • .uk-flex-left- It is used to align flex items to the left.
  • .uk-flex-center- It is used to align flex items in the center of the main axis.
  • .uk-flex-right- It is used to align flex items to the right of the container along the main axis.
  • .uk-flex-between- It is used to distribute flex items evenly, with equal space between the items along the main axis.
  • .uk-flex-around - It is used to distribute flex items evenly with equal space on both sides of each item inside the container along the main axis.

Flex Item: Center Alignment

To align the flex item in the center, add .uk-flex-center class to the flex container.

Example

Column1
Column2
Column3
Column4

General Syntax

Try it now

Flex Item: Right Alignment

To align the flex item in the right, add .uk-flex-right class to the flex container.

Example

Column1
Column2
Column3
Column4

General Syntax

Try it now

Flex Item: Between Alignment

The .uk-flex-between class is used to distribute the flex items along the main axis, with equal space between the flex items.

Example

Column1
Column2
Column3
Column4

General Syntax

Try it now

Flex Item: Round Alignment

The .uk-flex-around class is used to distribute the flex items evenly with equal space on both sides of each item inside the container along the main axis.

Example

Column1
Column2
Column3
Column4

General Syntax

Try it now