# 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%


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/alignitems-de-stretch-shen-qi-de-bu-guan-yong.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.