Utilize the power of Flexbox to create a wide range of layouts.
This component uses Flexbox, a concept that is still quite new but extremely powerful for creating layouts. Note that its functionality will be enhanced fundamentally in the future, while right now it is mainly used to easily align objects.
To apply this component, just add the
.uk-flex class to a
<div> element. This will create the flex container. By default, all flex items will be aligned to the left and equally matched in height and width.
<div class="uk-flex"> <div>...</div> </div>
You can add a number of different classes to modify this behavior.
||Add this class to center flex items horizontally.|
||Add this class to align flex items to the right.|
||Add this class to align flex items to the top.|
||Add this class to vertically center flex items.|
||Add this class to align flex items to the bottom.|
<div class="uk-flex uk-flex-middle uk-flex-center">...</div>