包裹固定容器的Flexbox

Question

我正在尝试创建一个具有可变数量的表单字段的表单，这些字段将水平扩展。每个字段的最小宽度为300像素，但如果有额外的空间，则会扩展以填充该行。如果300px的每个字段没有足够的空间，那么它将换行到另一行。 Flexbox将是完美的解决方案。但是，我还希望有一个可变宽度容器，用于提交和取消按钮，它们固定在第一行的右侧。 （参见附图。）

如何创建Flexbox流动的固定，右对齐容器？这可以单独使用Flexbox吗？ CSS Grid（或Flexbox和Grid的组合）会在这里有用吗？示例代码将不胜感激。

Answer 1

我认为你最好的解决方案是使用float和inline-block。那么你可以考虑媒体查询来调整大小

body>.container {
  background-color: #FFFFFF;
  margin: auto;
  margin-top: 24px;
  padding: 0px;
}

.container {
  border: solid 1px #F00;
  font-size:0;
}

.box {
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  min-height: 36px;
  width: calc(25% - 10px);
  min-width: 200px;
  display:inline-block;
  margin: 5px;
  font-size:initial;
}

.box.buttons {
  float:right;
}

<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<div class="container">
  <div class="box buttons">
    <button>Submit</button>
    <button>Cancel</button>
  </div>
  <div class="box a">Box A</div>
  <div class="box b">Box B</div>
  <div class="box c">Box C</div>

  <div class="box e">Box E</div>
  <div class="box f">Box F</div>
</div>

Answer 2

经过一些实验，我发现CSS Grid可以实现这一点。这是基本布局：

HTML：

<div class="auto-fit">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
  <div class="G">G</div>
  <div class="H">H</div>
  <div class="I">I</div>
  <div class="J">J</div>
  <div class="K">K</div>
  <div class="L">L</div>
  <div class="M">M</div>
  <div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>

CSS：

div.auto-fit {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;  
}

div.auto-fit > div {  
  background-color: #fff;  
  border-radius: 3px;  
  padding: 15px;  
  font-size: 14px;
}

div.buttons {
  grid-column: -1/-2;
  grid-row: 1/2;
}

这是一个jsfiddle，显示它在行动：https://jsfiddle.net/lobo78/5ufqdm4y/22/