HorizontalAlignment.cmp

<aura:component>
    
    <h1 class="slds-page-header slds-page-header__title">HorizontalAlignment </h1>
    <div class="c-container">
        <br/>
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem  >
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">4</div>
            </lightning:layoutItem>
        </lightning:layout>
        <br/>
        <hr/>
        <br/>
        <lightning:layout horizontalAlign="spread">
            <lightning:layoutItem  >
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem>
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">4</div>
            </lightning:layoutItem>
        </lightning:layout>
        <br/>
        <hr/>
        <br/>
         <lightning:layout horizontalAlign="center">
            <lightning:layoutItem  >
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem>
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">4</div>
            </lightning:layoutItem>
        </lightning:layout>
        <br/>
        <hr/>
        <br/>
         <lightning:layout horizontalAlign="end">
            <lightning:layoutItem  >
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem>
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <div class="custom-box">4</div>
            </lightning:layoutItem>
        </lightning:layout>
        <br/>
    </div>
</aura:component>