Flex Align

flex-align.html

<ul class="flex align-items-start">
  <li class="red"><p>Box One</p></li>
    <li class="blue"><p>Box Two</p></li>
    <li class="red"><p>Box Three</p></li>
</ul>

<ul class="flex align-items-end">
  <li class="red"><p>Box One</p></li>
    <li class="blue"><p>Box Two</p></li>
    <li class="red"><p>Box Three</p></li>
</ul>

<ul class="flex align-items-center">
  <li class="red"><p>Box One</p></li>
    <li class="blue"><p>Box Two</p></li>
    <li class="red"><p>Box Three</p></li>
</ul>

<ul class="flex align-items-baseline">
  <li class="red"><p>Box One</p></li>
    <li class="blue"><p>Box Two</p></li>
    <li class="red"><p>Box Three</p></li>
</ul>

<ul class="flex align-items-stretch">
  <li class="red"><p>Box One</p></li>
    <li class="blue"><p>Box Two</p></li>
    <li class="red"><p>Box Three</p></li>
</ul>