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

Question

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

我需要将哪种 CSS 添加到我的容器以及其中的 span 以实现下面的组织？

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

Answer 1

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

使用弹性 CSS3 属性
使用 CSS3 属性宽度自动并在跨度 class.

让跨度class="class-name"

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

在此范围内 class，您可以根据需要添加更多属性。

Answer 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 的好处是你可以更好地控制容器的这个宽度的使用方式，使用浮动解决方案你无法证明内容的合理性，它会全部粘在左边，右边不用 space。

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

Dynamically responsive grid-style container in CSS

javascript

css

containers

flexbox

css-grid