align-items的stretch神奇的不管用

• 抖音：https://v.douyin.com/iL2PMsQg/

• B站：https://www.bilibili.com/video/BV1794y1K7JT/

源码：

https://github.com/sunzsh/st-html-demo/blob/master/alignitem-stretch-demo.html

演示：

https://sunzsh.github.io/html-demos/alignitem-stretch-demo.html

大家都知道这个属性吧

align-items它主要在flex布局里边

用来设置子元素的这个对齐方式

然后默认呢（大家看）是这个stretch

也就是这种等高的

那我今天遇到这个bug啊

真的差点让我崩溃

我们来看这个demo

我也是flex布局

然后里边三个元素

然后我也没有去指定align-items

所以他默认应该是这种stretch的

但是大家看很奇怪

他就是不给你等高

然后更奇怪的是什么呢

大家看啊

我现在是这个外层的flex…这个wrapper

然后呢我给他设一个align-items

等于比如用center

哈

大家看center也好使

然后呢start…start也可以

end…end也可以

唯独这个stretch不行

大家看

默认它也不好使

找了半天呢

我发现竟然是这个子元素

里边不知道什么样式

里面写了（height）100%啊

大家看，把它注掉这样就可以了

所以结论是什么呢

就是针对这个stretch的这种方式啊

如果想用它

千万不要把子元素加（height）100%