Question

我正在尝试创建具有可变数量的可水平扩展的表单域的表单。每个字段的最小宽度为300 px，但如果有多余的空间，则会扩展为填充行。如果没有足够的空间容纳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/

环绕固定容器的Flexbox

2 个答案: