A lightning:layoutItem is the basic element within lightning:layout. You can arrange one or more layout items inside lightning:layout. The attributes of lightning:layoutItem enable you to configure the size of the layout item, and change how the layout is configured on different device sizes.
The layout system is mobile-first. If the size and smallDeviceSize attributes are both specified, the size attribute is applied to small mobile phones, and the smallDeviceSize is applied to smart phones. The sizing attributes are additive and apply to devices that size and larger. For example, if mediumDeviceSize=10 and largeDeviceSize isn’t set, then mediumDeviceSize will apply to tablets, as well as desktop and larger devices.
If the smallDeviceSize, mediumDeviceSize, or largeDeviceSize attributes are specified, the size attribute is required.
Here is an example.
<aura:component> <div> <lightning:layout> <lightning:layoutItem padding="around-small"> <div>1</div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div>2</div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div>3</div> </lightning:layoutItem> <lightning:layoutItem padding="around-small"> <div>4</div> </lightning:layoutItem> </lightning:layout> </div> </aura:component>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
flexibility | Object | Make the item fluid so that it absorbs any extra space in its container or shrinks when there is less space. Allowed values are: auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes). Use a comma-separated value for multiple options, such as 'auto, no-shrink'. | |
largeDeviceSize | Integer | If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than desktop. It is expressed as an integer from 1 through 12. | |
mediumDeviceSize | Integer | If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than tablet. It is expressed as an integer from 1 through 12. | |
padding | String | Sets padding to either the right and left sides of a container, or all sides of a container. Allowed values are horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, around-large. | |
size | Integer | If the viewport is divided into 12 parts, size indicates the relative space the container occupies. Size is expressed as an integer from 1 through 12. This applies for all device-types. | |
smallDeviceSize | Integer | If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than mobile. It is expressed as an integer from 1 through 12. |