CSS flex-direction：列，证明没有发生定位答案

【问题标题】：CSS flex-direction: column, justify positioning not happeningCSS flex-direction：列，证明没有发生定位
【发布时间】：2020-10-08 23:08:57
【问题描述】：

我在 40 分钟内找不到我的错误。我想要实现的是定位一些元素，输入字段等。使用高度和显示：flex，flex-direction：column和justify-content：space-between。基本的东西，这里是一些代码

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-family: 16px/1.2 "Montserrat", sans-serif;
    box-sizing: border-box;
}

.content {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right top, #01dbde, #00cfff, #00b8ff 20%, #6a8cff, #fc00ff 100%);
}

form {
    background: #fff;
}

.border-curve {
    border-radius: 0.2em;
    overflow: hidden;
}

fieldset {
    border: none;
    margin: 3em 5em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 32rem;
}

.form-title {
    text-align: center;
    font-size: 2.5rem;
}

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

.form-social button {
    flex: 0 0 48%;
}

.form-field {
}

.form-action {
}

.form-field label,
.form-field input,
.form-action input {
    width: 100%;
    display: block;
}

.form-action input {
    border: 0.2em solid #333;
    background: #333;
    color: #fff;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Funny Login Form</title>
        <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="content">
            <form action="#" method="GET" class="border-curve">
                <fieldset>
                    <p class="form-title">Sign In With</p>

                    <p class="form-social">
                        <button class="border-curve">Facebook</button>
                        <button class="border-curve">Google</button>
                    </p>

                    <p class="form-field">
                        <label for="username">Username</label>
                        <input class="border-curve" type="text" name="username" id="username" />
                    </p>

                    <p class="form-field">
                        <label for="password">Password</label>
                        <input class="border-curve" type="password" name="password" id="password" />
                    </p>

                    <p class="form-action">
                        <input class="border-curve" type="submit" value="Sign in" />
                    </p>
                </fieldset>
            </form>
        </div>
    </body>
</html>

我的问题是为什么我不能使用 flexbox 在标签字段集中定位我的元素？

【问题讨论】：

标签： html css

【解决方案1】：

<fieldset> 是一个按钮元素，所以display: flex 不能应用于它。尝试在您的字段集中放置一个 div，它将包含您所有的表单元素作为子元素，然后将display: flex 应用于该字段。

HTML：

 <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>

现在您已经将 flex 项放在可以应用 flex 的容器中，您可以添加所有所需的 flex 属性。

CSS：

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

【讨论】：

谢谢，不知道fieldset是按钮元素。
很高兴为您提供帮助，欢迎来到 Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。
抱歉，没听懂。我应该如何结束我的问题？
点击相应问题上的复选标记按钮，如果您觉得有帮助，请点赞。
这会将您的问题标记为已回答，以便将来遇到类似问题的人能够从中受益

【解决方案2】：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Styling_with_CSS 表示有一个匿名框保存字段集的内容。此匿名框将继承字段集的显示值，但似乎其他样式将应用于字段集标记本身而不是匿名框。

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

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: 16px/1.2 "Montserrat", sans-serif;
  box-sizing: border-box;
}

.content {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right top, #01dbde, #00cfff, #00b8ff 20%, #6a8cff, #fc00ff 100%);
}

form {
  background: #fff;
}

.border-curve {
  border-radius: 0.2em;
  overflow: hidden;
}

fieldset {
  border: none;
  margin: 3em 5em;
}

.fieldset-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 32rem;
}

.form-title {
  text-align: center;
  font-size: 2.5rem;
}

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

.form-social button {
  flex: 0 0 48%;
}

.form-field {}

.form-action {}

.form-field label,
.form-field input,
.form-action input {
  width: 100%;
  display: block;
}

.form-action input {
  border: 0.2em solid #333;
  background: #333;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Funny Login Form</title>
  <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="content">
    <form action="#" method="GET" class="border-curve">
      <fieldset>
        <div class="fieldset-container">
          <p class="form-title">Sign In With</p>

          <p class="form-social">
            <button class="border-curve">Facebook</button>
            <button class="border-curve">Google</button>
          </p>

          <p class="form-field">
            <label for="username">Username</label>
            <input class="border-curve" type="text" name="username" id="username" />
          </p>

          <p class="form-field">
            <label for="password">Password</label>
            <input class="border-curve" type="password" name="password" id="password" />
          </p>

          <p class="form-action">
            <input class="border-curve" type="submit" value="Sign in" />
          </p>
        </div>
      </fieldset>
    </form>
  </div>
</body>

</html>

【讨论】：

谢谢，我应该开始阅读文档了。