提问者:小点点

Flex不会将两个div换行


我正在尝试制作一个名字和姓氏在同一行/列上的表单。我试着将主组放入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;
}

共1个答案

匿名用户

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

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

null

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