JSFiddle - React, Tailwind, and code Playground

by jay_zou

HTML

<div class="wrap">
        <div class="container">
            <div class="content flex-start">
                <div class="box" style="background-color:red;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
                <div class="box" style="background-color:yellow;">c</div>
                <div class="box" style="background-color:#1B8057;">d</div>
                <div class="box" style="background-color:#E67676;">e</div>
                <div class="box" style="background-color:#B30753;">f</div>
                <div class="box" style="background-color:#280F34;">g</div>
                <div class="box" style="background-color:#35BCBF;">h</div>
                <div class="box" style="background-color:#511E78;">i</div>
            </div>
            <h4>flex-start</h4>
        </div>
        <div class="container">
            <div class="content flex-end">
                <div class="box" style="background-color:red;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
                <div class="box" style="background-color:yellow;">c</div>
                <div class="box" style="background-color:#1B8057;">d</div>
                <div class="box" style="background-color:#E67676;">e</div>
                <div class="box" style="background-color:#B30753;">f</div>
                <div class="box" style="background-color:#280F34;">g</div>
                <div class="box" style="background-color:#35BCBF;">h</div>
                <div class="box" style="background-color:#511E78;">i</div>
            </div>
            <h4>flex-end</h4>
        </div>
        <div class="container">
            <div class="content center">
                <div class="box" style="background-color:red;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
                <div class="box" style="background-color:yellow;">c</div>
                <div class="box"...

CSS

.wrap {
	        display: -webkit-flex;
	        display: flex;
	    }
	    
	    .content {
	        width: 200px;
	        height: 200px;
	        border: 1px solid #c3c3c3;
	        display: -webkit-flex;
	        display: flex;
	        -webkit-flex-direction: row;
	        flex-direction: row;
	        flex-wrap: wrap;
	        -webkit-flex-wrap: wrap;
	    }
	    
	    .flex-start {
	        align-content: flex-start;
	    }
	    
	    .flex-end {
	        align-content: flex-end;
	    }
	    
	    .center {
	        align-content: center;
	    }
	    
	    .space-between {
	        align-content: space-between;
	    }
	    
	    .space-around {
	        align-content: space-around;
	    }
	    
	    .stretch {
	        align-content: stretch;
	    }

	    .container {
	        text-align: center;
	    }
	    
	    .box {
	        width: 50px;
	        height: 50px;
	    }