CSS Flex Align Content
BLUF: Styling is what brings the web to life, and mastering CSS Flex Align Content is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Flex Align Content
CSS is all about presentation. Discover how CSS Flex Align Content works to transform plain HTML into a premium user experience in the guide below.
The align-content property in CSS3 Flexbox is utilized to adjust the flex-wrap property's functionality. Similar to align-items, it aligns flex lines rather than flex items.
Its possible values are:
- stretch: It is the default value. It specifies lines stretch to take up the remaining space.
- flex-start: It specifies that lines are packed toward the start of the flex container.
- flex-end: It specifies that lines are packed toward the end of the flex container.
- center: It specifies that lines are packed toward the center of the flex container.
- space-between: It specifies that lines are evenly distributed in the flex container.
- space-around: It specifies that lines are evenly distributed in the flex container, with half-size spaces on either end.
Let's consider an example to observe the outcome of utilizing the center value.
See this example:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
width: 300px;
height: 300px;
background-color: lightpink;
}
.flex-item {
background-color: brown;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
