html - CSS3 : Nested flexbox form messes up spacing

Question

我正在尝试制作一个标签和输入在同一行的 flexbox 表单。使用 flex-basis 和其他 flex 属性给出了预期和期望的结果。

但是，如果必须将该 flexbox 嵌套在另一个具有设定宽度的元素中，整个事情就会分崩离析。

例如查看附加的 fiddle 并在有和没有 div {width:30%}

的情况下运行它

我该如何解决这个问题？

fiddle

Answer 1

你试图让 flexbox 表现得像一个网格/表格，因为它不是为此而设计的，你需要通过设置一些约束来帮助它，比如 min-width ，尽管正如您所说您不希望那样，但请使用正确的显示类型。

由于 CSS Grid 还没有合理的浏览器支持，这里是退而求其次的，CSS Table

div.lesswide {
  width: 30%;
  margin-top: 20px;
}
form  {
  display: table;
  width: 100%;
}
form div {
  display: table-row;
}
form label {
  display: table-cell;
  width: 30%;
}
form input {
  display: table-cell;
  width: 60%;
}

<div>
  <form>
    <div>
      <label>A</label>
      <input type="text">
    </div>

    <div>
      <label>LONG</label>
      <input type="text">
    </div>

    <div>
      <label>SOMEWHAT LONGER</label>
      <input type="text">
    </div>

    <div>
      <label>INTHEMIDDLE</label>
      <input type="text">
    </div>
  </form>
</div>

<div class="lesswide">
  <form>
    <div>
      <label>A</label>
      <input type="text">
    </div>

    <div>
      <label>LONG</label>
      <input type="text">
    </div>

    <div>
      <label>SOMEWHAT LONGER</label>
      <input type="text">
    </div>

    <div>
      <label>INTHEMIDDLE</label>
      <input type="text">
    </div>
  </form>
</div>

---

基于评论的更新版本

form {
  display: table;
  width: 100%;
}
form > div {
  display: table-row;
}
form label {
  display: table-cell;
  width: 30%;
}
form input {
  width: 100%;
  box-sizing: border-box;
}

form div div:first-child {
  display: table-cell;
  width: 30%;
}
form div div:last-child {
  display: table-cell;
  width: 70%;
}

form div .side-by-side input[type=button] {
  width: 30%;
}
form div .side-by-side input[type=submit] {
  width: 70%;
}

@media screen and (max-width: 550px) {
  form div div:first-child,
  form div div:last-child,
  form label {
    display: block;
    width: auto;
  }
}

<div>
  <form>
    <div>
      <label>A</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>LONG</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>SOMEWHAT LONGER</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>INTHEMIDDLE</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <div>
        <input type="button" value="Button">
      </div>
      <div>
        <input type="submit">
      </div>
    </div>
  </form>
</div>
<br>
<div>
  <form>
    <div>
      <label>A</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>LONG</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>SOMEWHAT LONGER</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <label>INTHEMIDDLE</label>
      <div>
        <input type="text">
      </div>
    </div>

    <div>
      <div>
      </div>
      <div class="side-by-side">
        <input type="button" value="Button"><input type="submit">
      </div>
    </div>
  </form>
</div>