为什么我的 flex 布局是水平的而不是垂直的？ [复制]答案

【问题标题】：Why is my flex layout horizontal instead of vertical? [duplicate]为什么我的 flex 布局是水平的而不是垂直的？ [复制]
【发布时间】：2021-06-16 02:22:11
【问题描述】：

我一直在练习 html 和 CSS，并试图复制这个网站： https://codepen.io/freeCodeCamp/full/VPaoNP

但是，我对 flexbox 有点卡住，并且对为什么我的 h1、h2 和“调查表单”类在我设置 display: flex 时突然变成内联元素感到困惑。

html {
  box-sizing: border-box;
}

body {
  background-color: #bdb2ff;
  display: flex;
}

.survey-form {
  background-color: #a0c4ff;
}

<h1>freeCodeCamp Survey Form</h1>
<h2>Thank you for taking the time to help us improve the platform</h2>

<div class="survey-form">
  <form action="none">
    <p>
      <label for="username">Name</label>
      <input type="text" id="username" placeholder="Enter your name" required>
    </p>

    <p>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your Email" required>
    </p>

    <p>
      <label for="age">Age (optional)</label>
      <input type="email" id="age" placeholder="Age">
    </p>
  </form>
</div>

在我将 body 设置为 display:flex 之前，一切似乎都很好。 h1's、h2's 和我的表格都在同一行。下面是设置显示前后的图片：flex

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将flex-direction: column; 添加到您的代码中并取消注释您的对齐方式。

html {
  box-sizing: border-box;
}

body {
  background-color: #bdb2ff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.survey-form {
  background-color: #a0c4ff;
}

<h1>freeCodeCamp Survey Form</h1>
<h2>Thank you for taking the time to help us improve the platform</h2>

<div class="survey-form">
  <form action="none">
    <p>
      <label for="username">Name</label>
      <input type="text" id="username" placeholder="Enter your name" required>
    </p>

    <p>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your Email" required>
    </p>

    <p>
      <label for="age">Age (optional)</label>
      <input type="email" id="age" placeholder="Age">
    </p>
  </form>
</div>

还请查看本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：