Flexbox 导致并排元素

Question

我正在尝试在下面的 sn-p 中使用 flexbox。

但是，标题和它下面的 div 似乎没有获得 CSS 样式。如果我删除容器 div 中的 flexbox 设置，标题会显示在表单 div 的顶部。但是当我添加 display flex 时，它会将标题和表单 div 并排放置。

为什么会这样？我试图在顶部显示标题并在其下方形成 div，然后使用 justify-content: center 水平居中。谢谢。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

Answer 1

您想使用flex-direction 属性。它需要四个值：

• row
• column
• row-reverse
• column-reverse

您想将容器类编辑为此：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

有关订购弹性商品的更多信息，请参阅docs

---

编辑：

您可以使用 flex-flow 属性，这是一个 css 简写属性：

• flex-direction
• flex-wrap

Answer 2

display: flex 的默认行为是将项目排成一行。您可以通过添加 flex-flow: column 来更改此设置以对齐列中的项目。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column; /* added flex-flow: column here*/
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

Answer 3

试试这个：

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: fit-content;
  margin: auto;
}

header {
  border: 1px solid black;
}

#form {
  border: 1px solid black;
}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>

Answer 4

使用flex-flow:column 容器

.container {
  display: flex;
  flex-flow: column;
}

在页眉下方添加样式，以使页眉内的内容居中对齐。

header {
   align-items: center;
   justify-content:center;
   display:flex;
   flex-flow:column;
}

试试这个 sn-p

.container {
  display: flex;
  flex-flow: column;
}

header {
  border: 1px solid black;
  margin-bottom: 10px;
   align-items: center;
   justify-content:center;
   display:flex;
   flex-flow:column;
}

#form {
  border: 1px solid black;

}

<div class="container">
  <header>
    <h1 id="title">Survey Form</h1>
    <p id="description">Thank you for helping us improve by taking this survey.</p>
  </header>
  <div id="form">
  <form id="survey-form">
    <div class="form-group">
      <label id="name-label" for="name">Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your name" required>
    </div>
    <div class="form-group">
      <label id="email-label" for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" pattern=".+@.+\..+" required>
     <div>
    <div class="form-group">
      <label id="number-label" for="number">Age (optional)</label>
      <input type="number" id="number" name="age" placeholder="Enter your email" min="1" max="200" required>
    <div class="form-group">
      <p>What's your coding experience?</p>
      <label>
        <input type="radio" name="user-experience" value="noob" class="input-radio" />
        Noob
      </label>
            <label>
        <input type="radio" name="user-experience" value="dangerous" class="input-radio" checked/>
        Dangerous
      </label>
            <label>
        <input type="radio" name="user-experience" value="veteran" class="input-radio" />
        Veteran
      </label>
    </div>
    <div class="form-group">
      <p>What programing language do you use the most at work?</p>
      <select id="dropdown" class="form-group" name="language" required>
        <option disabled selected value>Select a language</option>
        <option value="java">Java</option>
        <option value="javascript">JavaScript</option>
        <option value="python">Python</option>
        <option value="c++">C++</option>
        <option value="c">C</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="ruby">Ruby</option>
      </select>
    </div>
      <div class="form-group">
      <p>Do you like to work on the Front-end or Back-end? <span class="clue">(Check all that apply)</span</p>
      <label>
        <input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end
      </label>
      <label>
        <input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end
      </label>
    </div>
    <div class="form-group">
      <p>Please provide any comments if we missed anything?</p>
      <textArea id="comments" name="comment" placeholder="Place your comments here..."></textArea>
     <div>
    <div class="form-group">
      <button type="submit" id="submit" class="submit-button">Submit</button>
    <div>
  </form>
       </div>
</div>