Flexbox align-content property

The CSS3 Flexbox align-content property is used to modify the behavior of the flex-wrap property. It is just like align-items, but it aligns flex lines instead of 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 take an example to see the result of using the center value.

See this 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>

Next TopicCSS Table Alternate Row Color

← prev next →