W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en-US">
<title>Flex Alignment</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body class="w3-container">

<h2>Flex Helpers in a Flex Row</h2>
<p>The <b>w3-flex-align</b> helpers control how flex items are positioned inside a flex container.</p>

<h4>w3-flex-align-start</h4>
<div class="w3-flex-align-start w3-light-grey" style="height:100px">
  <div class="w3-container w3-red"><p>One</p></div>
  <div class="w3-container w3-green"><p>Two</p></div>
  <div class="w3-container w3-blue"><p>Three</p></div>
</div>

<h4>w3-flex-align-center</h4>
<div class="w3-flex-align-center w3-light-grey" style="height:100px">
  <div class="w3-container w3-red"><p>One</p></div>
  <div class="w3-container w3-green"><p>Two</p></div>
  <div class="w3-container w3-blue"><p>Three</p></div>
</div>

<h4>w3-flex-align-end</h4>
<div class="w3-flex-align-end w3-light-grey" style="height:100px">
  <div class="w3-container w3-red"><p>One</p></div>
  <div class="w3-container w3-green"><p>Two</p></div>
  <div class="w3-container w3-blue"><p>Three</p></div>
</div>

<h4>w3-flex-align-stretch</h4>
<div class="w3-flex-align-stretch w3-light-grey" style="height:100px">
  <div class="w3-container w3-red"><p>One</p></div>
  <div class="w3-container w3-green"><p>Two</p></div>
  <div class="w3-container w3-blue"><p>Three</p></div>
</div>
</body>
</html>