html - 如何将标签从上到左移动并以 flex 形式使输入 100% 长？

Question

换句话说，如何从中得到:

像这样:

换句话说，从输入顶部的标签到输入左侧的标签，同时使输入适合父级的宽度。

.row {
      display: flex
    }
    
    .form-group {
      display: flex
      flex: 1 0 0
      flex-direction: column
    }
    
    .col-12 {
      //
    }
    
    .col-6 {
      //
    }
    
    .col-4 {
      //
    }

<div class="row">
  <div class="form-group">
    <label class="col-6">First name</label>
    <input class="col-6" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-6">Last name</label>
    <input class="col-6" type="text" value=""></input>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-8" type="text" value=""></input>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value=""></input>
  </div>
</div>

Answer 1

您不需要在 row 上使用 display:flex - 在 form-group 上声明它就足够了。然后在子元素(input 和 label)上添加相应的 flex 属性。

同样非常重要:始终在每个声明之后插入 ;，否则您将破坏整个规则 block 。

/* essential rules */
.form-group {
  display: flex;
}
label {
  flex: 0 0 100px;
}
input {
  flex: 1;
}


/* only for style */
.form-group {
  margin-bottom:1em;
}
input{
  padding:.4em;
  border-radius:2px;
  border:1px solid #ccc;
}
label {
  padding:.4em;
  font-family:sans-serif;
}

<div class="row">
  <div class="form-group">
    <label class="col-6">First name</label>
    <input class="col-6" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-6">Last name</label>
    <input class="col-6" type="text" value="">
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-8" type="text" value="">
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
  <div class="form-group">
    <label class="col-4">Message</label>
    <input class="col-12" type="text" value="">
  </div>
</div>

注意:input 是空元素。他们不使用结束标签。