Flex不会将两个div换行

Question

我正在尝试制作一个名字和姓氏在同一行/列上的表单。我试着将主组放入flex，然后用flex-wrap放入我想要的组，但它似乎没有移动。我是不是漏掉了什么？我尝试了几个不起作用的东西（比如将包装的孩子设置为flex1）。不起作用。

不管怎样，这里是HTML

<form>
   <div class="sd-form-group"></div>
   <div className="sd-form-wrap">
      <div class="form-name form-first-name">
         <label>First Name</label>
         <br>
         <input type="text">
      </div>
      <div class="form-name form-last-name">
         <label>Last Name</label>
         <br>
         <input type="text">
      </div>
   </div>
   <div class="form-email">
      <label>Email</label>
      <br>
      <input type="text">
   </div>
   <div class="form-message">
      <label>Message</label>
      <br>
      <textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
   </div>
   <div class="form-checkbox">
      <input type="checkbox">
      <label>
        Communications box.
      </label>
   </div>
   <input type="submit" value="Submit">
</div>
</form>

CSS：

.sd-form-group{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.sd-form-wrap {
    flex-wrap: wrap;
}

Answer 1

一个问题出现在第3行 上，如果不使用jsx或类似方法，请尝试使用class而不是classname。

还要确保.sd-form-wrap类具有display:flex；

null

css prettyprint-override">.sd-form-group{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}
.sd-form-wrap {
    display: flex;
}

<form>
   <div class="sd-form-group"></div>
   <div class="sd-form-wrap">
      <div class="form-name form-first-name">
         <label>First Name</label>
         <br>
         <input type="text">
      </div>
      <div class="form-name form-last-name">
         <label>Last Name</label>
         <br>
         <input type="text">
      </div>
   </div>
   <div class="form-email">
      <label>Email</label>
      <br>
      <input type="text">
   </div>
   <div class="form-message">
      <label>Message</label>
      <br>
      <textarea placeholder="Enter your comments, questions and feedback here." rows="4"></textarea>
   </div>
   <div class="form-checkbox">
      <input type="checkbox">
      <label>
        Communications box.
      </label>
   </div>
   <input type="submit" value="Submit">
</div>
</form>