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
Leave a Reply