Understanding the CSS properties align-content, align-items, and align-self is essential for effective layout alignment in flexbox designs. So let's get started.
The align-content property
The align-content property assists in aligning items vertically by providing options such as flex-start, flex-end, center, stretch, space-between, space-around, and space-even. When used with flex-wrap, it adjusts how flex items wrap.
Unlike align-items, which align individual flex items, align-content aligns entire lines of flex items. It allows you to position all items within a flex container, such as centering them or aligning them to the beginning or end.
For optimal results, this property is most effective when there are two rows of items. It may encounter limitations with three or more rows, especially if wrapping behavior is not uniform across rows. Otherwise, it ensures precise alignment of flex lines within the container.
<head>
<style>
.container {
display: flex;
padding: 10px;
width: 20%;
border: 3px solid black;
height: 40vh;
flex-wrap: wrap;
align-content: space-around;
}
.one,
.two,
.three,
.four,
.five {
border: 2px solid steelblue;
padding: 0 20px;
}
</style>
</head>
<body>
<h1>The align-content</h1>
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
</div>
</body>
flex-start: Lines are positioned at the beginning of the flex container.
flex-end: Lines are positioned at the end of the flex container.
center: Lines are centered within the flex container.
stretch: The default value. Lines expand to fill the entire container.
space-between: Lines are evenly spaced with the first line at the start and the last line at the end, leaving equal space between lines.
space-around: Lines are evenly spaced with equal space around each line, including space at the start and end.
space-evenly: Lines are evenly spaced with equal space between them, including space at the start and end, as well as the center.
The align-items property
With the align-items property, we can achieve vertical alignment. Flex-start, flex-end, center, stretch, and baseline are the values of aligned content. You can use this to move all of the items inside a box, such as the center, first, or last.
<head>
<style>
.container {
display: flex;
padding: 10px;
width: 20%;
border: 3px solid black;
height: 40vh;
flex-wrap: wrap;
align-items: flex-end;
}
.one,
.two,
.three,
.four {
border: 2px solid teal;
padding: 0 20px;
}
</style>
</head>
<body>
<h1>The align-items</h1>
<div class="container">
<div class="one" style="height: 20px;">one</div>
<div class="two" style="height: 40px;">two</div>
<div class="three" style="height:90px;">three</div>
<div class="four" style="height: 150px;">four</div>
</div>
</body>
flex-start: Items are aligned at the start of the container.
flex-end: Items are aligned at the end of the container.
center: Items are centered within the container.
stretch: Items are stretched to fill the container.
baseline: Items are aligned at the baseline of the container.
<head>
<style>
.container {
display: flex;
padding: 10px;
width: 30%;
border: 3px solid black;
height: 40vh;
flex-wrap: wrap;
align-items: baseline;
}
.one,
.two,
.three,
.four {
border: 2px solid teal;
padding: 0 20px;
}
</style>
</head>
<body>
<h1>The align-items: baseline value</h1>
<div class="container">
<div class="one" style="height: 30px; font-size: 30px;">one</div>
<div class="two" style="height: 40px; font-size: 20px;">two</div>
<div class="three" style="height:90px; font-size: 10px;">three</div>
<div class="four" style="height: 150px; font-size: 50px;">four</div>
</div>
</body>
The align-self property
The align-self property is used for vertical alignment in the same way as align-items. The values of aligned self are auto, flex-start, flex-end, center, stretch, and baseline.
The function of this property is that if you want to give alignment to an individual item, then you can use it.
<head>
<style>
.container {
display: flex;
padding: 10px;
width: 30%;
border: 3px solid black;
height: 40vh;
flex-wrap: wrap;
align-self: stretch;
}
.one,
.two,
.three,
.four {
border: 2px solid teal;
padding: 0 20px;
}
</style>
</head>
<body>
<h1>The align-self</h1>
<div class="container">
<div class="one">one</div>
<div class="two" style="align-self: flex-start;">two</div>
<div class="three" style=" align-self: auto;">three</div>
<div class="four" style=" align-self: flex-end;">four</div>
</div>
</body>
auto: The default value. The item inherits its parent container's alignment.
flex-start: The item is positioned at the start of the flex container.
flex-end: The item is positioned at the end of the flex container.
center: The item is centered vertically within the flex container.
stretch: The item stretches to fill the entire height of the flex container.
baseline: The item is aligned with the baseline of the flex container's content.
Conclusion
When working with flexbox layouts in CSS, understanding the differences between align-content, align-items, and align-self is crucial.
Align Content used for vertical alignment of flex lines within the flex container. Adjusts the spacing between flex lines.
Align Items used for vertical alignment of flex items within the flex container. Aligns individual flex items along the cross axis.
Align Self is similar to align-items but applies alignment to individual flex items, overriding the align-items property for that specific item.
Each property serves a distinct purpose in controlling vertical alignment, offering flexibility in designing responsive and visually appealing layouts.
I hope you completely understand all these properties. If you have any questions, you can ask them in the question box given below.