<h2>justify-content: flex-start</h2>
<div class="container flex-start">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>justify-content: flex-end</h2>
<div class="container flex-end">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>justify-content: center</h2>
<div class="container center">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>justify-content: space-between</h2>
<div class="container space-between">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>justify-content: space-around</h2>
<div class="container space-around">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.container{
display: flex;
flex-direction:row;
margin-right: 10px;
background-color: #eee;
margin-bottom: 80px;
}
.flex-start{justify-content: flex-start;}
.flex-end{justify-content: flex-end;}
.center{justify-content: center;}
.space-between{justify-content: space-between;}
.space-around{justify-content: space-around;}
.box{
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
font-weight: bold;
line-height: 100px;
}
.box:nth-child(1){background-color: gold;}
.box:nth-child(2){background-color: pink;}
.box:nth-child(3){background-color: skyblue;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.