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;align-self: flex-end;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
            </div>
            <h4>flex-end(a)</h4>
        </div>
        <div class="container">
            <div class="content flex-end">
                <div class="box" style="background-color:red;align-self: flex-start;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
            </div>
            <h4>flex-start(a)</h4>
        </div>
        <div class="container">
            <div class="content center">
                <div class="box" style="background-color:red;align-self:baseline;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
            </div>
            <h4>baseline(a)</h4>
        </div>
        <div class="container">
            <div class="content baseline">
                <div class="box" style="background-color:red;align-self: stretch;">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
            </div>
            <h4>stretch(a)</h4>
        </div>
        <div class="container">
            <div class="content stretch">
                <div class="box" style="background-color:red;align-self: center">a</div>
                <div class="box" style="background-color:lightblue;">b</div>
            </div>
            <h4>center(a)</h4>
        </div>
    </div>

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-items: flex-start;
	    }
	    
	    .flex-end {
	        align-items: flex-end;
	    }
	    
	    .center {
	        align-items: center;
	    }
	    
	    .baseline {
	        align-items: baseline;
	    }
	    
	    
	    .stretch {
	        align-items: stretch;
	    }

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