CSS中的动态响应网格样式容器答案

【问题标题】：Dynamically responsive grid-style container in CSSCSS中的动态响应网格样式容器
【发布时间】：2018-05-21 08:15:42
【问题描述】：

在我的应用程序中，用户可以输入文本并单击按钮以将新的“跨度”附加到包含其输入文本的 DOM（在容器内）。我希望这些跨度具有适合给定用户输入文本所需的宽度（您可以假设用户不会输入比容器宽度更长的内容）。我还希望容器能够连续容纳尽可能多的跨度；如果跨度需要比当前行剩余的空间多 -> 转到下面的行（参见图片的最后两行）。

我需要向我的容器以及其中的跨度添加什么样的 CSS 才能实现下面的组织？

请注意：此容器的宽度是固定的，但高度会根据需要增加以适应新的文本填充跨度

【问题讨论】：

标签： javascript css flexbox containers css-grid

【解决方案1】：

根据你的模型，你可以通过两种方式完成你的任务：

使用 flex CSS3 属性
在 span 类中使用 CSS3 属性宽度自动和向左浮动。

让 span class="class-name"

.class-name {
  display: inline-block;
  width: auto;
  float: left;
}

在这个 span 类中，您可以根据需要添加更多属性。

【讨论】：

我需要在容器类中放入什么？只显示：flex?
我没有在容器类中添加任何其他内容，这似乎奏效了。谢谢！
如果你想为你的布局使用 flex 属性。这是基本代码： .flex-container { display: flex;弹性包装：换行； }
width: auto 和 float: left 都没有添加任何自 inline 元素以来的任何内容，默认情况下按内容大小和左对齐。此外，如果父级有display: flex（标签列表建议），则建议的设置都不会有任何影响。
我添加了你所说的所有内容，但效果很好。

【解决方案2】：

使用 CSS3 flex 属性来做到这一点：

.container {
  display: flex;
  border: 1px solid red;
  width: 20rem;
  flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
  justify-content: space-between; /* alternatives are space-evenly or space-around*/
}

看到这个pen，使用 flex 你有一个优势，你可以更好地控制容器的这个宽度是如何使用的，使用浮动解决方案你不能证明内容的合理性，它会全部粘在左边并且不用右边的空格。

【讨论】：