How To Determine The Height Of Flex-lines?

Thanks to the answers to my question here (How do I determine the height of a row?) I now understand (looking at the example below) that by setting an explicit height of 60px on a

Solution 1:

Edited the whole answer relative to Temani Afif's important key points that i didn't even think about.

---

To determine the height of a single flex line in a multi lines flex container, We only need to find the free space.

To find the free space we need to find the height of the tallest flex item in each line before stretch is applied.

Assuming that we know the height of all tallest flex items in each flex line we then follow the formula

1. Free Space: Container height - Sum of all tallest flex item's heights
2. Equally Distributed free space: Free space / Number of flex lines

Then we take the Equally Distributed free space and add to it the height of the tallest flex item's height which then will give us the height of that flex line.

---

Example

Arguments:

• Container height is 300px
• 3 flex lines
• Height of the tallest flex item in the first flex line is 30px
• Height of the tallest flex item in the second flex line is 20px
• Height of the tallest flex item in the third flex line is 70px

---

Free space is 180px

Free Space: Container height - Sum ofall tallest flex item's heights
300px - (30px + 20px + 70px) = 180px

Equally Distributed free space is 60px

Equally Distributed free space: Free space / Number of flex lines
180px /3=60px

Now we add the Equally Distributed free space to the height of the tallest flex item in each line

• Height of the first flex line is 30px + 60px = 90px
• Height of the second flex line is 20px + 60px = 80px
• Height of the third flex line is 70px + 60px = 130px

[flex]{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    width: 200px;
    background-color: #0000008f;
/*     align-items:flex-start; */
}

[flex] * {
    width: 100px;
}

[flex]:nth-child(1) {
    background-color: darkorchid;
}

[flex]:nth-child(2) {
    background-color: darkkhaki;
    height: 30px;
}

[flex]:nth-child(3) {
    background-color: dodgerblue;
}

[flex]:nth-child(4) {
    background-color: darkgoldenrod;
    height: 20px;
}

[flex]:nth-child(5) {
    background-color: darkcyan;
}

[flex]:nth-child(6) {
    background-color: darkred;
    height: 70px;
}

<divflex><div></div><div>height : 30px</div><div></div><div>height : 20px</div><div></div><div>height : 70px</div></div>

Use devTool to check the height of the stretched flex items.

---

Now we know how to calculate the height of flex lines, We just need to find the arguments.

Container height

This one is pretty simply, if we don't have a set height on the container it will be equal to content therefore the tallest flex item will define the height of the flex line, The same would happen If the container height is shorter.

---

Flex lines count

This can be tricky because with flex-wrap:wrap; the lines count will change all the time

---

Height of the tallest flex item in each flex line

This is the most important bit of information and the most difficult to find

There's two methods That i can think of:

First method

Apply align-items:flex-start and simply get the height of all flex items and compare them then reset back to align-items:stretch

Second method

We need to get the height of all flex items before align-items:stretch which is the height of the text or if there's a set height.

If there's a set height, Simply get that height.

To determine the height of the actual text There's a lot to account for,

1. How many lines of text are there
2. line-height
   • If line-height:normal; account for font-family and font-size
   • If line-height:1;(unitless value) account for font-size
   • If line-height:30px;(fixed value) account for line-height only
   • If line-height:30%;(relative value) account for parent's font-size
3. Any css property that can add to the height like paddingbordervertical-align on nested inline elements
4. There's probably more, i will be adding to this list in future edits.