Arranging Content

Justifying Content

Last Updated:
July 25, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Class Name When applied to .display__flex-h When applied to .display__flex-v
.justify-content__start Anchors children to the left Anchors children to the top
.justify-content__center Puts children in the middle Puts children in the middle
.justify-content__end Anchors children to the right Anchors children to the bottom
.justify-content__space-between makes the first and last children touch the very edges of their respective sides of the box, while evenly distributing children in between them
.justify-content__space-around puts an equal amount of space on all sides of each box, including the first and last.

‍

Recommended Usage

Customization

Resources that mention this topic

No items found.
info

Get Help from a LiftKit Expert

arrow_forward
Book Quick Chat

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email info@chainlift.io directly for assistance.
content_copy
Copy Code
.justify-content__start {
    justify-content: flex-start;
}

.justify-content__center {
    justify-content: center;
}

.justify-content__end {
    justify-content: end;
}

.justify-content__space-between {
    justify-content: space-between;
}

.justify-content__space-around {
    justify-content: space-between;
}
code snippets will appear here