Html CSS弹性方向：列，证明定位不发生

我大概有40分钟找不到我的错误。我想要实现的是定位一些元素、输入字段等。。使用高度和显示：柔性、柔性方向：列和对齐内容：间距。基本的东西，这里有一些代码

*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：继承；
}
html{
字体系列：16px/1.2“蒙特塞拉特”，无衬线；
框大小：边框框；
}
.内容{
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景图像：线性渐变（至右上方，#01dbde，#00cfff，#00b8ff 20%，#6a8cff，#fc00ff 100%）；
}
形式{
背景：#fff；
}
.边界曲线{
边界半径：0.2米；
溢出：隐藏；
}
字段集{
边界：无；
边缘：3em 5em；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
最小高度：32雷姆；
}
.表格名称{
文本对齐：居中；
字体大小：2.5rem；
}
.社会形式{
显示器：flex；
证明内容：之间的空间；
}
.表单社交按钮{
弹性：048%；
}
.表单字段{
}
.形式行动{
}
.表单字段标签，
.表单字段输入，
.表格动作输入{
宽度：100%；
显示：块；
}
.表格动作输入{
边框：0.2米实心#333；
背景：#333；
颜色：#fff；
}

有趣的登录表单
使用登录

脸谱网
谷歌


用户名


密码

表示有一个匿名框，用于保存字段集的内容。此匿名框将继承字段集的显示值，但似乎其他样式将应用于字段集标记本身，而不是匿名框

如果将字段集的当前内容包装在容器div中，则可以在两个容器之间设置该容器空间的样式

*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：继承；
}
html{
字体系列：16px/1.2“蒙特塞拉特”，无衬线；
框大小：边框框；
}
.内容{
最小高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景图像：线性渐变（至右上方，#01dbde，#00cfff，#00b8ff 20%，#6a8cff，#fc00ff 100%）；
}
形式{
背景：#fff；
}
.边界曲线{
边界半径：0.2米；
溢出：隐藏；
}
字段集{
边界：无；
边缘：3em 5em；
}
.fieldset容器{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
最小高度：32雷姆；
}
.表格名称{
文本对齐：居中；
字体大小：2.5rem；
}
.社会形式{
显示器：flex；
证明内容：之间的空间；
}
.表单社交按钮{
弹性：048%；
}
.form字段{}
.form action{}
.表单字段标签，
.表单字段输入，
.表格动作输入{
宽度：100%；
显示：块；
}
.表格动作输入{
边框：0.2米实心#333；
背景：#333；
颜色：#fff；
}

有趣的登录表单
使用登录

脸谱网
谷歌


用户名


密码

是一个按钮元素，因此无法对其应用

显示：flex

。尝试在字段集中放置一个div，该字段集将包含所有作为子元素的表单元素，然后对其应用

display:flex

HTML:

---

谢谢，我不知道fieldset是一个按钮元素。很高兴提供帮助，欢迎使用Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。对不起，我没有理解您。我应该如何结束我的问题？单击相应问题上的复选标记按钮，如果您觉得有帮助，请单击向上投票。这将标记您的问题为已回答，希望将来有类似问题的人能够从中受益。谢谢，我应该开始阅读文档。

 <fieldset>
        <div class="fieldset-content">
            <div>
                <p class="form-title">Sign In With</p>
            </div>
            <div>
                <p class="form-social">
                    <button class="border-curve">Facebook</button>
                    <button class="border-curve">Google</button>
                </p>
            </div>
            <div>
                <p class="form-field">
                    <label for="username">Username</label>
                    <input class="border-curve" type="text" name="username" id="username" />
                </p>
            </div>
            <div>
                <p class="form-field">
                    <label for="password">Password</label>
                    <input class="border-curve" type="password" name="password" id="password" />
                </p>
            </div>
            <div>
                <p class="form-action">
                    <input class="border-curve" type="submit" value="Sign in" />
                </p>
            </div>
        </div>
    </fieldset>

.fieldset-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}