• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Home
  • About me

A Salesforce Blog

examples | tips | gotchas | lightning

  • Lightning Base Components
  • Lightning Testing Service
  • Apex
  • gotchas
  • tips

lightning:layout horizontalAlign

November 12, 2017 By paul Leave a Comment

Examples of what the different horizontalAlign values (center, space, spread, and end) display.

<aura:component>
    <lightning:layout horizontalAlign="center">
        <lightning:layoutItem padding="around-small">
            <lightning:button label="centre" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="centre" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="centre" variant="brand" />
        </lightning:layoutItem>
    </lightning:layout>

    <hr/>

    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem padding="around-small">
            <lightning:button label="space" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="space" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="space" variant="brand" />
        </lightning:layoutItem>
    </lightning:layout>

    <hr/>

    <lightning:layout horizontalAlign="spread">
        <lightning:layoutItem padding="around-small">

            <lightning:button label="spread" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="spread" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="spread" variant="brand" />
        </lightning:layoutItem>
    </lightning:layout>

    <hr/>

    <lightning:layout horizontalAlign="end">
        <lightning:layoutItem padding="around-small">
            <lightning:button label="end" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="end" variant="brand" />
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            <lightning:button label="end" variant="brand" />
        </lightning:layoutItem>
    </lightning:layout>

</aura:component>

EDITED: For an interactive demo, see:

https://sfpaul-developer-edition.eu12.force.com/s/lightninglayout

Filed Under: lightning base components

Recent Posts

  • Lightning Web Components Playground
  • use sfdx force:org:open to avoid having to verify your Salesforce identity
  • component.find returns undefined
  • Pass complex Apex map to Lightning
  • Lightning Checkboxes and Select All

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Lightning Web Components Playground
  • use sfdx force:org:open to avoid having to verify your Salesforce identity
  • component.find returns undefined
  • Pass complex Apex map to Lightning
  • Lightning Checkboxes and Select All

Recent Comments

  • rhucha on Lightning Checkboxes and Select All

Copyright © 2019 · News Pro On Genesis Framework · WordPress · Log in