<div class="container">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
<div class="container" style="justify-content: flex-end;">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
<div class="container" style="justify-content: center;">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-between;">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-evenly;">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-around;">
<div class="item orange">A</div>
<div class="item green">B</div>
<div class="item blue">C</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: row;
border: 2px solid black;
}
.item {
color: black;
font-size: 48px;
padding: .5em;
text-align: center;
}
.orange {
background: yellow;
}
.green {
background: lightgreen;
}
.blue {
background: skyblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.