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.
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.
Source Code
<div class="uk-flex">
<div class="bg-color"><h4>Column1</h4></div>
<div class="bg-color-alt"><h4>Column2</h4></div>
<div class="bg-color"><h4>Column3</h4></div>
<div class="bg-color-alt"><h4>Column4</h4></div>
</div>
Source Code: Output
The above source code result will be:
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.To align the flex item in the center, add .uk-flex-center class to the flex container.
To align the flex item in the right, add .uk-flex-right class to the flex container.
The .uk-flex-between class is used to distribute the flex items along the main axis, with equal space between the flex items.
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.
