前端求教，有没有懂 flex 布局的

[awesomePower]

是这样的，给flex容器设置了align-content: stretch;，它也是个默认值，有拉伸的效果。

然后所有子项中有一个设置了高度，最后拉伸的结果是两行的高度不一样，它是怎么个原理，每行最终的拉伸高度是怎么计算的，有大佬给解答一下吗？

代码示例： https://txgq4v-5000.csb.app/

[wweerrgtc]

@gowk 花了 20 分钟通关了😂

[ChrisFreeMan]

@gowk 谢谢你，煤炭球画家

[gowk]

@wweerrgtc #21 最后一个不会 😄

[a132811]

你的例子中：分上下两个 flex row.　在 chrome version 120 下：

第一个 row ，最大的 block 身高＝ 35px*1.15 + margin(70px) = 110px
第二个 row ，最大的 block 身高＝ 190px

纵轴剩余: 500px - 110px - 190px = 200px, 两者平分各 100px 。

第一个 row：110+100 = 210px
第二个 row：190+100 = 290px (强制指定 item 的 190px 则不受影响)

－－－－－－－－－
BTW ，这个类似主轴分配规则，比如：

```html
<div style="width:400px;display:flex">
<div style="width:100px;flex-grow:1">item-a</div>
<div style="width:100px;flex-grow:2">item-b</div>
</div>
item-a, item-b 会根据 flex-grow 值，分割剩余的 200px(仅当存在剩余空间时)
item-a: 100 + 200px*(1/3) = 166.66
item-b: 100 + 200px*(2/3) = 233.33
```

[a132811]

@a132811 chrome version 120 默认 line-height 1.15

[a132811]

flex 各属性示例 https://static.vgee.cn/static/index.html

[awesomePower]

@a132811 感谢解答和分享

[gowk]

@gowk #23
记录一下最后一题：
flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;