css - Flexbox wrap - 跳过第一个元素

Question

如何使用 flexbox 环绕功能跳过第一个元素？我有一个 fiddle 可以正确解释一切:

https://jsfiddle.net/adityarb88/3ca1m1un/

.form-group{
  display: flex;
  flex-wrap: wrap;

  label{
    flex: 0 0 200px;
    margin: 0.5 rem;
  }

  input{
    flex: 1 auto;
    max-width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

我希望输入文本框换行但不在标签下方。这可能吗？

Answer 1

如果您不想更改您的标记，您可以这样做。

为了提高响应速度，我添加了一个媒体查询。

.form-group {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-left: 150px;
}
.form-group label {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
}
.form-group input {
  flex: 1 auto;
  max-width: 200px;
  margin-right: 10px;
  margin-top: 10px;
}

@media screen and (max-width: 380px) {

  .form-group {
    padding-left: 10px;
  }

  .form-group label {
    position: relative;
    flex: 1 auto;
    width: 100%;
    margin-top: 10px;
  }

}

<form>
  <div class="form-group">
    <label>Test Label</label>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
  </div>
</form>