We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'. The most common values are flex-start flex-end center
,
, or
.
body {
display: flex;
flex-direction: row;
}
.container {
background-color: #ebb871;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
align-items: flex-end;
align-items: center
}
<body>
<div class="container">
<div class="box1 red"></div>
<div class="box2 green"></div>
<div class="box3 blue"></div>
</div>
</body>