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