如何获取flexbox中一行的高度答案

【问题标题】：How to get the height of a row in a flexbox如何获取flexbox中一行的高度
【发布时间】：2023-03-29 21:06:01
【问题描述】：

如何在 flexbox 中获取行的高度如果我有一个 flexbox 容器并且在该容器中，有 3 个不同的行，也许 javascript 可以检索每行的高度，例如，如果我想得到flexbox中第二行的高度有可能吗？

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【解决方案1】：

您可以通过使用具有相同类的所有元素创建array 来实现此目的，然后使用forEach 您将能够获得所有这些元素的高度。例如：

let arrayName = document.querySelectorAll(".your-row"); 
//gets every single element that has the your-row class.

arrayName.forEach(element => console.log(element.clientHeight));
/* loops through the element and for each element it prints the height to the console 
including padding but NOT the horizontal scrollbar height, border, or margin. */

例如，如果您想获取第二个元素的高度，您只需要使用相同的数组并指定您想要获取第二个元素。例如：

let arrayName = document.querySelectorAll(".your-row"); 
//Getting all elements again.

console.log(arrayName[1].clientHeight);
// Log the 2nd elements height into the console.

【讨论】：