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 Column</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-column w3-flex-align-start">
  <div class="w3-container w3-red"><p>1</p></div>
  <div class="w3-container w3-green"><p>2</p></div>
  <div class="w3-container w3-blue"><p>3</p></div>
</div>

<h4>w3-flex-align-center</h4>
<div class="w3-flex-column w3-flex-align-center">
  <div class="w3-container w3-red"><p>1</p></div>
  <div class="w3-container w3-green"><p>2</p></div>
  <div class="w3-container w3-blue"><p>3</p></div>
</div>

<h4>w3-flex-align-end</h4>
<div class="w3-flex-column w3-flex-align-end">
  <div class="w3-container w3-red"><p>1</p></div>
  <div class="w3-container w3-green"><p>2</p></div>
  <div class="w3-container w3-blue"><p>3</p></div>
</div>

<h4>w3-flex-align-stretch</h4>
<div class="w3-flex-column w3-flex-align-stretch">
  <div class="w3-container w3-red"><p>1</p></div>
  <div class="w3-container w3-green"><p>2</p></div>
  <div class="w3-container w3-blue"><p>3</p></div>
</div>
</body>
</html>