VerticalAlignment.cmp

<aura:component>
    <h1 class="slds-page-header slds-page-header__title">VerticalAlignment </h1>
    <div class="c-container">
        <lightning:layout verticalAlign="start" class="x-large btm-brdr">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">4</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">5</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">6</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">7</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">8</div>
            </lightning:layoutItem>
        </lightning:layout>
       
         <lightning:layout verticalAlign="center" class="x-large btm-brdr">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">4</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">5</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">6</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">7</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">8</div>
            </lightning:layoutItem>
        </lightning:layout>
        
         <lightning:layout verticalAlign="stretch" class="x-large btm-brdr">
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                1
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                2
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                3
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                4
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                5
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                6
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                7
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
                8
            </lightning:layoutItem>
        </lightning:layout>
       
         <lightning:layout verticalAlign="end" class="x-large btm-brdr">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">4</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">5</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">6</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">7</div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box">8</div>
            </lightning:layoutItem>
        </lightning:layout>
        
    </div>
</aura:component>