align-items
![Aligning Flex Items Effortlessly with align-items](/_next/image/?url=https%3A%2F%2Fstatic.d-libro.com%2F01-course-content-images%2F1011-10-HTML-CSS-Introduction%2F010-main-figures%2Falign-items-id101110150610.webp&w=1920&q=75)
The align-items
property is used to set a layout pattern of flex items (nested child elements) along the cross axis of the flex container. The cross axis is typically the vertical axis unless you set column
or column-reverse
in the flex-direction
property. We'll provide our explanation based on the default flex-direction
setting.
This property is effective when the flex items are placed only in one line. When the flex items are wrapped, you need to add the align-content
property, which will be explained in the next topic.
flex-start
This is the default setting. With this property value, flex items are laid out at the top edge of the parent element.
Note: 'edge' means the endpoint with some distance from the edge of the element based on the container's paddings and flex item's margins.
![align-items: flex-start align-items: flex-start](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/align-items-flex-start-id101110150610-img01.webp)
center
With this property value, flex items are laid out in the center of the parent element.
![align-items: center align-items: center](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/align-items-center-id101110150610-img02.webp)
flex-end
With this property value, flex items are pushed out to the bottom edge of the parent element.
![align-items: flex-end align-items: flex-end](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/align-items-flex-end-id101110150610-img03.webp)
stretch
With this property value, flex items are stretched from the top edge to the bottom edge of the parent element.
![align-items: stretch align-items: stretch](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/align-items-stretch-id101110150610-img04.webp)
baseline
With this property value, flex items are aligned with the flex container baseline like in the image below.
![align-items: baseline align-items: baseline](https://static.d-libro.com/01-course-content-images/1011-10-HTML-CSS-Introduction/020-image-insert/align-items-baseline-id101110150610-img05.webp)
Practice
Objective:
Check how the align-items property works
1. Update the body section of the HTML file
Add the code below in the <body>
section of the chapter15.html file. We use the same classes as the ones set before. There is no need to set new classes.
<h2>align-items</h2>
<h3>Original Position</h3>
<div class="flex-container" style="display: flex; height: 100px;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<h3>align-items: flex-start</h3>
<div class="flex-container" style="display: flex; height: 100px; align-items: flex-start;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<h3>align-items: center</h3>
<div class="flex-container" style="display: flex; height: 100px; align-items: center;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<h3>align-items: flex-end</h3>
<div class="flex-container" style="display: flex; height: 100px; align-items: flex-end;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<h3>align-items: stretch</h3>
<div class="flex-container" style="display: flex; height: 100px; align-items: space-between;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<h3>align-items: baseline</h3>
<div class="flex-container" style="display: flex; height: 100px; align-items: baseline;">
<div class="flex-item" style="font-size: 2rem;">1</div>
<div class="flex-item">2</div>
<div class="flex-item" style="font-size:1.5rem;">3</div>
</div>
<hr>
2. Check the result with a browser
- Open chapter15.html with a browser.
- You can see how the
align-items
property adjusts the positions of the flex items.
You can also check the sample result here (Demo Site).