时间戳

首页 > 解决方案 > Flex 不会将两个 div 包装在同一行中

html - Flex 不会将两个 div 包装在同一行中

问题描述

我正在尝试制作一个名字和姓氏在同一行/列上的表格。我尝试将主要组放入 flex 中，然后将我想要的组放入 flex-wrap 但它似乎没有移动。我错过了什么吗？我尝试了几件不起作用的事情（比如将包裹的孩子设置为 flex 1 1。没有用。

无论如何，这是 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;
}

标签： htmlcssflexbox

解决方案

一个问题是在第 3 行<div className="sd-form-wrap">尝试使用class而不是className在不使用 jsx 或类似的情况下。

还要确保你的.sd-form-wrap班级有display: flex;

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

推荐阅读