Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<aura:component>
<h1 class="slds-page-header slds-page-header__title">VerticalAlignment </h1>
<div class="c-container">
<lightning:layout verticalAlign="start" class="x-large btm-brdr">
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">1</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">2</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">3</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">4</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">5</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">6</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">7</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">8</div>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="center" class="x-large btm-brdr">
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">1</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">2</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">3</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">4</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">5</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">6</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">7</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">8</div>
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="stretch" class="x-large btm-brdr">
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
1
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
2
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
3
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
4
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
5
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
6
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
7
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small" class="custom-box">
8
</lightning:layoutItem>
</lightning:layout>
<lightning:layout verticalAlign="end" class="x-large btm-brdr">
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">1</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">2</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">3</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">4</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">5</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">6</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">7</div>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<div class="custom-box">8</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</aura:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.