使用Flexbox构建表单时Input与Textarea宽度不一致求助

你的代码遗漏了对textarea的flex属性设置，这是导致两者宽度不一致的核心原因：

• 你给.flex-outer input设置了flex:2，但textarea没有这个规则。在Flexbox布局中，元素会优先遵循flex属性的拉伸/收缩规则，因此input会根据flex比例被拉伸，而textarea只会遵守你设置的width:200px，最终出现宽度差异。

修正方案很简单，把flex属性同时应用到input和textarea上：

.flex-outer label {
    flex: 1;
    padding: 10px 15px;
}

/* 同时为input和textarea设置flex比例 */
.flex-outer input, .flex-outer textarea {
    flex: 2;
}

input, textarea {
    width: 200px;
}

label[for="message"] {
    align-self: center;
}

额外优化建议：如果希望输入框在容器宽度足够时能拉伸，容器变窄时不会小于设定宽度，可以把width:200px改成min-width:200px，提升表单的响应式适配性。

内容的提问来源于stack exchange，提问作者iregret