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>