如何让flex容器内的input元素占满容器宽度并实现响应式适配

问题根源 #

• 当前.login_table使用flex布局但未指定排列方向，默认横向排列导致三个表单行挤在同一行，宽度被压缩
• 输入框、提交按钮的父容器未配置弹性占宽属性，子元素无法撑满可用空间
• 容器宽度未做响应式配置，无法适配不同尺寸的屏幕

修复方案 #

替换你现有的CSS代码为以下内容即可，HTML部分无需修改：

.login_table {
    display: flex;
    flex-direction: column; /* 改为纵向排列，每个表单行单独占一行 */
    padding: 0.5em;
    border: 2px solid #46a7e0;
    /* 自适应宽度：小屏占90%宽度，大屏最大宽度500px，避免过宽 */
    width: min(90%, 500px);
    margin: 0 auto; /* 水平居中 */
    /* 若需要兼容IE等旧浏览器，把上面的width替换为下面两行即可
    width: 90%;
    max-width: 500px;
    */
}

.login_row {
    display: flex;
    width: 100%; /* 占满父容器全宽 */
    margin-bottom: 0.8em; /* 每行增加间距，提升美观度 */
}

.login_cell {
    display: flex;
    align-items: center; /* 文字与输入框垂直居中对齐 */
    padding: 0.5em;
}

/* 标签列固定宽度，禁止被压缩 */
.login_cell:first-child {
    width: 85px;
    flex-shrink: 0;
}

/* 输入框/按钮列自动占满剩余所有宽度 */
.login_cell:last-child {
    flex: 1;
    width: 100%;
}

/* 输入框和提交按钮占满所在单元格的全宽 */
.login_cell input {
    width: 100%;
    box-sizing: border-box; /* 避免padding、边框撑大元素宽度 */
}

修改后即可实现你需要的效果：输入框、按钮占满容器可用宽度，同时登录容器会根据屏幕尺寸自适应缩放，小屏不会出现横向滚动条，宽屏不会显示过宽影响使用。

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