为何flex-basis:100%不生效？响应式表单布局问题求解

我正在构建一个包含姓名、电话号码、邮箱、消息和提交按钮的联系表单，核心需求如下：

• 邮箱和消息字段始终占据表单100%宽度（不受屏幕尺寸影响）
• 姓名和电话号码字段需响应式，根据屏幕尺寸显示在同一行或上下排列

设计采用响应式布局，已为.field和.form-container应用flexbox。我为.w-100设置了flex: 0 0 100%;样式，但该样式未生效，按预期flex-basis:100%应让元素占据容器全宽，请问我犯了什么错误？如何解决？

HTML代码：

<section id="contact" class="contact">
            <h2>Contact Me</h2>
            <form action="#">
                <div class="form-container">
                    <div class="field">
                        <label>Name: </label>
                        <input type="text" placeholder="Name"></input>
                    </div>
                    <div class="field">
                        <label>Phone Number: </label>
                        <input type="tel" placeholder="Phone Number"></input>
                    </div>
                    <div class="field w-100">
                        <label>Email: </label>
                        <input type="mail" placeholder="Email"></input>
                    </div>
                    <div class="field w-100">
                        <label>Message: </label>
                        <textarea cols="30" rows="3"></textarea>
                    </div>
                </div>
                <div class="submit-form">
                    <input type="submit" class="button" value="send" />
                </div>
            </form>
        </section>

CSS代码：

form {
    background-color: var(--grey);
    padding: 2rem;
    border-radius: 1rem;
}

.field {
    display: flex;
    margin-bottom: 1rem;
}

.field label {
    flex: 0 0 90px;
    color: var(--white);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="mail"],
.field textarea {
    flex: 1;
}

.w-100 {/*this field not working*/
    flex: 0 0 100%;
}

@media(min-width: 768px) {
    form {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .field {
        flex: 0 0 calc(50% - 1rem);
    }
}

当前效果：

预期效果：

错误原因 #

媒体查询@media(min-width: 768px)中定义的.field { flex: 0 0 calc(50% - 1rem); }优先级高于全局的.w-100样式。CSS规则中，相同权重的选择器，后定义的样式会覆盖先定义的，所以邮箱和消息字段的宽度被强制限制为50%左右，无法占据全宽。

解决方法 #

提高.w-100选择器的优先级，确保它能覆盖媒体查询中的.field样式，推荐以下两种方式：

方法1：使用更具体的选择器

在媒体查询内添加.field.w-100的样式，利用选择器权重优势覆盖原有设置：

@media(min-width: 768px) {
    form {
        max-width: 800px;
        margin: 0 auto;
    }

    .form-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .field {
        flex: 0 0 calc(50% - 1rem);
    }

    /* 确保带.w-100的字段占满容器宽度 */
    .field.w-100 {
        flex: 0 0 100%;
    }
}

方法2：使用!important（应急方案，不推荐）

如果不想调整选择器结构，可在全局.w-100样式中添加!important强制覆盖：

.w-100 {
    flex: 0 0 100% !important;
}

额外优化建议 #

1. 修正HTML输入类型错误：input type="mail"改为标准的type="email"，符合表单规范。
2. 用gap属性优化间距：给.form-container添加gap代替margin-bottom，布局更整洁：

@media(min-width: 768px) {
    .form-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem; /* 字段间间距 */
    }

    .field {
        flex: 0 0 calc(50% - 0.5rem); /* 适配gap调整宽度计算 */
        margin-bottom: 0; /* 移除原有margin-bottom */
    }
}

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