3.flexbox

• flex row & flex items

<div class="row-hl d-flex flex-row">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• flex row reverse

<div class="row-hl d-flex flex-row-reverse">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• justify content - content start

<div class="row-hl d-flex justify-content-start">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• justify content - content center

<div class="row-hl d-flex justify-content-center">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• justify content - content end

<div class="row-hl d-flex justify-content-end">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• justify content - content around

<div class="row-hl d-flex justify-content-around">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• justify content - content between

<div class="row-hl d-flex justify-content-between">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• flex column

<div class="row-hl d-flex flex-column">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• flex column reverse

<div class="row-hl d-flex flex-column-reverse">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• vertical align items - start

<div class="row-hl d-flex flex-column-reverse">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• vertical align items - center

<div class="row-hl d-flex align-items-center">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• vertical align items - end

<div class="row-hl d-flex align-items-end">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• vertical align items - baseline

<div class="row-hl d-flex align-items-baseline">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• vertical align items - stretch

<div class="row-hl d-flex align-items-end">
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
  <div class="p-4 item-hl">Flex Item</div>
</div>

• align self

<div class="d-flex row-hl">
  <div class="align-self-start p-4 item-hl">Flex Item</div>
  <div class="align-self-center p-4 item-hl">Flex Item</div>
  <div class="align-self-end p-4 item-hl">Flex Item</div>
  <div class="align-self-baseline p-4 item-hl">Flex Item</div>
  <div class="align-self-stretch p-4 item-hl">Flex Item</div>
</div>