环绕固定容器的 Flexbox答案

【问题标题】：Flexbox that wraps around a fixed container环绕固定容器的 Flexbox
【发布时间】：2019-02-04 09:49:14
【问题描述】：

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

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

【问题讨论】：

没有一些 hack 没有直接/简单/通用的方法来使用 CSS 网格或 flexbox 来做到这一点。
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
这是一个 jsfiddle，其中包含我正在寻找的内容的说明。 jsfiddle.net/lobo78/twy5a5pn/24
我希望带有按钮的子容器不换行，而是留在第一行的右侧。
包装时应该发生什么？

标签： css flexbox css-grid

【解决方案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>

【讨论】：

嗯，我认为 Flexbox 和 Grid 是如此强大，以至于它们将取消所有“浮动”布局。我想我错了……
@Daren 好吧，当你需要浮动时，浮动你仍然很有用（就像你的情况一样）并且 flexbox 或网格很强大，但不能做到这一点。认为一种技术比另一种更好是错误的。每个都有其用例，您只需为每个用例选择正确的。

【解决方案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/

【讨论】：