x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .wrapper {
5
    display: flex;
6
    align-items: center;
7
    background-color: beige;
8
    height: 100vh;
9
  }
10
  .wrapper > div {
11
    padding: 20px;
12
    font-size: 4vw;
13
    color: white;
14
  }
15
  .red {
16
    background: orangered;
17
    align-self: flex-start;
18
  }
19
  .green {
20
    background: yellowgreen;
21
  }
22
  .blue {
23
    background: steelblue;
24
    align-self: flex-end;
25
  }
26
  body {
27
    margin: 0;
28
  }
29
</style>
30
31
<div class="wrapper">
32
  <div class="red">1</div>
33
  <div class="green">2</div>
34
  <div class="blue">3</div>
35
</div>