Layout
>
Flex
Flex components let's you define and control flex behaviour in html.
Syntax
[d]-[flex|inline-flex]
[flex]-[no-wrap|wrap|wrap-reverse]
[flex]-[baseline|center|end|start|stretch]-[center|end|start|around|between]
To set display property of element to flex.
<div class="d-flex">...</div> <div class="d-inline-flex">...</div>
To control the flex-wrap property.
<div class="flex-no-wrap">...</div> <div class="flex-wrap">...</div> <div class="flex-wrap-reverse">...</div>
You can also control both align-items and justify-content using a single keyword. The first value is the value for align-items and the second is justify-content.
<div class="flex-center-center">...</div> <div class="flex-end-between">...</div> <div class="flex-start-end">...</div>
Samples
<div class="flex-center-center"> <div>One</div> <div>Two</div> </div>
<div class="flex-end-center"> <div>One</div> <div>Two</div> </div>
<div class="d-inline-flex"> <div>One</div> <div>Two</div> </div>