问题
Specifically, I want to know, in the example below, why setting a height value to the first flex-item changes (actually increases) the height of the first row.
Generally, I want to be able to determine the height of a row (I suppose when the height of the flex-container is set to auto or an explicit value).
.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>回答1:
An initial setting of a flex container is align-content: stretch. This means that flex lines (i.e., "rows" or "columns") will expand the cross axis of the container equally. And that's what you get when you don't set any heights on the items:
.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, flex items on both lines have heights of 100px.
When you set a height on a flex item you are consuming free space. Only the remaining space gets factored into align-content: stretch.
So in the question the first item is given height: 60px. That leaves 140px of free space remaining in the cross axis, right? Okay, let's go with that. That 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>At this point we should see items 2, 3 and 4 with heights of 130px, and item 5 with a height of 70px. (Item 1 doesn't participate because align-items: stretch no longer applies. It's been overridden with a height declaration (full explanation).)
But that's not what happens. Participating items on the first row have a height of 121px, and on the second row 79px.
Why? Because there was less free space than originally thought. The content itself (the text) has height and consumes space. Once you factor in the height of the text (whatever it may be, I don't know), those numbers add up.
In fact, the only reason flex lines were equal height in the first example (the one with no height defined on the first item) was that all text had the same font size. If you were to change the font size of, let's say, item #5, flex lines would again have unequal 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>More details:
- Remove space (gaps) between multiple lines of flex items when they wrap
- Why does width and height of a flex item affect how a flex item is rendered?
- How does flex-wrap work with align-self, align-items and align-content?
回答2:
.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: 100%;
}
.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;
height: 100%;
} <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>回答3:
As you are setting flex-wrap: wrap. It might cause quite unexpected behavior of the flex-container when you add elements with various widths and heights in it. So, it gets harder to get the height of the first row as you add new items to flex-container.
In your code flex-container has a specific height of 200px and a width of 400px. That means, no matter how many elements the flex-container includes it will never overflow the given width and height. Every item in the flex-container will try to cover the available space.
Each row will have the height of it the element with the maximum height because of align-items: stretch. That's why setting the height of one item might not always effect to the height of the row.
来源：https://stackoverflow.com/questions/62352474/how-do-i-determine-the-height-of-a-row