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>
Result:
One
Two
<div class="flex-end-center"> <div>One</div> <div>Two</div> </div>
Result:
One
Two
<div class="d-inline-flex"> <div>One</div> <div>Two</div> </div>
Result:
One
Two


stage: in the making