CSS flex box justify content example

Submit By webmaster 2 years ago in css category
Tags: csscss-flexbox
Examples of flexbox justify-content property like flex-start, flex-end etc... Feel free to play with this code and create your own examples.
Preview HTML CSS JavaScript Resources
<h1>CSS flex box</h1> <div class="flex-example"> <h2>CSS flex box - justify-content: flex-start </h2> <div class="displayFlex flexStart"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div> <div class="flex-example"> <h2>CSS flex box - justify-content: flex-end </h2> <div class="displayFlex flexEnd"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div> <div class="flex-example"> <h2>CSS flex box - justify-content: Center </h2> <div class="displayFlex center"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div> <div class="flex-example"> <h2>CSS flex box - justify-content: space-between </h2> <div class="displayFlex spaceBetween"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div> <div class="flex-example"> <h2>CSS flex box - justify-content: space-around </h2> <div class="displayFlex spaceAround"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div> <div class="flex-example"> <h2>CSS flex box - justify-content: space-evenly </h2> <div class="displayFlex spaceEvenly"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> </div> </div>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); body { font-family: 'Sen', sans-serif; } .displayFlex { display: flex; } .flexStart { justify-content: flex-start; } .flexEnd { justify-content: flex-end; } .center { justify-content: center; } .spaceBetween { justify-content: space-between; } .spaceAround { justify-content: space-around; } .spaceEvenly { justify-content: space-evenly; } .flex-example { border: 1px solid #eee; background: #ddd; padding: 0 15px 15px; margin-bottom: 20px; max-width: 300px; } .box { background: #333; width: 50px; height: 50px; margin: 10px 10px 0 0; line-height: 50px; color: #fff; font-weight: bold; font-size: 1em; text-align: center; }

Download CSS flex box justify content example snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with CSS flex box justify content example snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet