Arranging Content

Aligning Children

Last Updated:
July 21, 2024

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Aligning children only works on elements with one of the following classes:

  • .display__flex-h
  • .display__ flex-v
  • .display__ grid set.
Class Name Applied to display__flex-h When applied to display__flex-v
.align-items__stretch Makes children take up the full height of the flex box Makes children take up the full width of the flex box
.align-items__center Makes them “hug” their content and center between the top and bottom of the bounding box Makes them “hug” their content and center between the left and right of the bounding box
.align-items__start Makes them hug their content and stick to the top of the bounding box Makes them hug their content and stick to the left of the bounding box
.align-items__end Makes them hug their content and stick to the bottom Makes them hug their content and stick to the right

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
/* Item Alignment */

.align-items__stretch {
  align-items: stretch;
}

.align-items__center {
  align-items: center;
}

.align-items__top {
  align-items: flex-start;
}

.align-items__start {
  align-items: flex-start;
}
code snippets will appear here