Flex Box or Flexible Box

Flex-box can be used to align boxes without assigning them width etc.

<div class="flex_box">

    <div class="flex_one">

    </div>

    <div class="flex_two">

    </div>

    <div class="flex_three">

    </div>

</div>

display:flex;

flex-direction: row; (Default)

                         row-reverse;

                         column;

                         column-reverse;

justify-content: flex-start; (Default)

                           flex-end;

                           center;

                           space-around;

                           space-between;

align-items: flex-start;

                     flex-end;

                     center;

.flex_one { flex:1; }

.flex_two { flex:2; }               //To make this div of double width

.flex_three { flex:1; }

flex-grow

flex-shrink

flex-basis

order

align-self

https://www.smashingmagazine.com/2018/08/flexbox-alignment/

https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/

https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/

https://www.smashingmagazine.com/2018/10/flexbox-use-cases/