flex元素的子元素宽度自动撑满了？

Question

代码：https://jsrun.net/bpeKp/edit

设置inline-block不起作用，这个按钮不能定宽（文本长度不确定），有什么方法自适应文字的宽度？

Answer 1

inline-block 本身就不管用。 flex 的优先级比较高。

这里的问题是你 flex-direction: colunm; 加上默认是副轴是撑开，所以你只要改一下副轴的对齐方式就可以。比如说也是 center

---

---

Answer 2

width: fit-content

Answer 3

给按钮加上 align-self: flex-start; ，因为其默认值是继承自父级盒子的 align-items: stretch 。
你可以在父级盒子上使用 align-items: flex-start;来给所有子元素都设置开始方向对齐，也可以在需要的子元素上设置 align-self: flex-start;