css flex 布局中 flex-direction为column，如何让子元素的宽度根据内容自动变化

在 display: flex 且 flex-direction: column 的布局中，默认情况下子元素会占满容器的宽度。要让子元素的宽度根据内容自适应，而不是自动拉伸填满父容器，你可以这样处理：

---

✅ 解决方案一：设置子元素 align-self: start 或 align-items: flex-start（父元素）

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 子元素靠左，宽度自适应内容 */
}

这样子元素不会拉伸，而是宽度跟随内容。

---

✅ 解决方案二：直接给子元素设置 width: fit-content（现代浏览器支持）

.child {
  width: fit-content;
}

如果你只想让某些子元素内容自适应宽度，可以单独给这些子元素加上 width: fit-content。

---

🚫 注意事项

不要给子元素设置 width: 100% 或让父元素 align-items: stretch（默认值），否则会拉伸到和父元素一样宽。

---