The default setting for a flex container is align-content: stretch
. This ensures that flex lines (referred to as "rows" or "columns") will evenly expand the cross axis of the container. When no heights are specified for the items, this will be the result:
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container > :nth-child(1) {
background-color: darkorchid;
/* height: 60px; */
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
}
<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>
In a container with height: 200px
and align-items: stretch
, both lines of flex items will have heights of 100px.
When you explicitly set a height on a flex item, it consumes available space. Only the remaining space contributes to align-content: stretch
.
For instance, if the first item has a height: 60px
, there would theoretically be 140px of free space left in the cross axis. This leftover space is distributed equally among both lines.
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container > :nth-child(1) {
background-color: darkorchid;
height: 60px;
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
}
<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>
However, instead of seeing items 2, 3, and 4 with heights of 130px, and item 5 with a height of 70px, the actual heights may end up being 121px and 79px due to factors like text content affecting the overall space consumption.
This discrepancy in height distribution can also be influenced by font sizes, as changes in font size can lead to unequal flex line heights.
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container > :nth-child(1) {
background-color: darkorchid;
/* height: 60px; */
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
font-size: 2em; /* demo */
}
<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>
Additional resources:
- Removing gaps between wrapped flex items
- Understanding the impact of width and height on flex item rendering
- Exploring how flex-wrap interacts with align-self, align-items, and align-content