显示：inline-flex；和 flex-wrap:wrap;不填充上一行文本答案

【问题标题】：display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text显示：inline-flex；和 flex-wrap:wrap;不填充上一行文本
【发布时间】：2020-11-29 00:55:38
【问题描述】：

我需要使用display: inline-flex; 和flex-wrap: wrap;。我认为 flexbox 的这两个值是相互阻塞的。每个句子都包裹在 flexbox 内的 span 中。如果句子足够短，它会像我想要的那样显示在另一个句子旁边，但后面的句子仍然不会填满剩余的空间。

我想要达到的目标：

我当前的代码：

.aligment {
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    white-space: normal !important;
}

<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
    </head>
    <body>
        <div class="aligment">
            <span>1.Wihu kw jw kwjew we wekjwe w.</span>
            <span>2.Wewewe jwe k ew k.</span>
            <span>3.Wew w ew wl we/ wewe we we we we we we w we we.</span>
            <span>4.We we we wew ewe.</span>
            <span>5.Weeeeeeeeeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
            <span>6.Wewewewe scawewe or.</span>
            <span>7.Wewe we we </span>
            <span>8.We we we </span>
        </div>
    </body>
</html>

在我连接 CSS 之前，文本会按我想要的方式显示，在完整的句子处中断并填充空格。连接 .css 文件后，直到宽度为 100% 时，句子才会中断。

white-space: normal !important; 不能正常工作，或者我发现的任何东西都不能正常工作。也许min-width 是答案，但我还没有弄清楚如何让它工作。我知道出现这个问题是因为 inline-flex 将句子真正视为块而不是行。

有任何使用 css、javascript 或 html 的想法吗？

也许很明显，以前没有人遇到过问题，但我有，但我找不到有效的解决方案。例如这些不起作用：How to specify line breaks in a multi-line flexbox layout?

【问题讨论】：

为什么需要使用它们？你想使用 flexbox 的原因是什么？
设置一个 sn-p，包含您尝试的内容以及您想要展示您的问题的内容。也许你需要的不是 flex。
感谢@stijnbannink 编辑。 G-Cyrillus 我需要使用 flex 的情况，因为稍后我会向它添加更多的 javascript 编码，甚至它不像我想要的那样，它比没有它更接近我想要的。如果您在 5 秒内没有想法，请不要打扰我不想偷走您的宝贵时间，我想也许除了我以外的每个人都很明显。我连续浏览了 20-30 页类似的问题，但没有任何效果，我找不到 eaxct 问题，也许这是一个无法克服的限制
问题是一个词不是一个标签，不能被分派到分数中（flex：1 for flex）并且flex在单个级别上工作，flex子是这里的span而不是单词，一个 flex-child 不会换行到不同的行或列。如果您还将 span 设置为 flex element ，并在文本中添加一个图像（html 标记），您将看到文本被包装到一个虚拟容器中，而不是每个单词都充当 flex 子项。您将需要 javascript 并将每个 ords 包装到一个标签中，您可以为其提供相同的宽度以适合单元格。
好吧@G-Cyrillus 我害怕这个。我更喜欢保持它的显示：inline-flex;和 flex-wrap: 换行；但似乎我必须找到别的东西。谢谢。

标签： html css flexbox

【解决方案1】：

不确定我是否完全理解，这是一种可能的方法，通过 grid 和 javascript ，其中每个单词都被包装到一个标签中，我们从中获取宽度以保持最大作为参考，然后句子的容器实际上从dom 通过 dispaly:contents 将单词保持为网格的直接子级。

https://codepen.io/gc-nomade/pen/VwKYKdj（脚本需要优化，不过是基本思路）

const sentence = document.querySelectorAll(".aligment > span");
let box = document.querySelector(".aligment");
let varCellWidth = "0";
for (i = 0; i < sentence.length; i++) {
  const words = sentence[i].textContent
    .trim()
    .split(" ")
    .map((s, i) => {
      return `<i>${s}</i>`;
    })
    .join("");
  let CellWidth = document.querySelectorAll(".aligment > span > i");

  for (ii = 0; ii < CellWidth.length; ii++) {

    let newWidth = CellWidth[ii].offsetWidth;
    let oldWidth = window.getComputedStyle(box, null).getPropertyValue("--CellWidth");
    if (oldWidth < newWidth) {
      box.style.setProperty('--CellWidth', newWidth);
    }
  }
  sentence[i].innerHTML = words;
  if (i == sentence.length - 1) {
    box.style.setProperty('--marginI', "0"); // no need to retrieve width anymore, they can spread the whole cell at this point
  }
}

.aligment {
  --CellWidth: 5;
  --MarginI: auto;
  display: grid;
  border: 1px solid #000;
  grid-template-columns: repeat(auto-fill, minmax( calc( var(--CellWidth) * 1px), 1fr));
  border: solid;
}

.aligment>span {
  display: contents;
  border: solid;
}

i {
  margin: var(--marginI, auto);
  border: solid 1px gray;
  background: #4472c4;
  color: white;
  text-indent:0.5em;
}

span:nth-child(5n - 1) i{
  background: #c65911;
}

span:nth-child(5n) i {
  background: #548235;
  color: white
}

span:nth-child(5n + 1) i {
  background: #ffd966;
  color: black;
}

span:nth-child(5n + 2) i {
  background: #111;
}

<div class="aligment">
  <span>1. Wihu kw jw kwjew we wekjwe w.</span>
  <span>2. Wewewe jwe k ew k.</span>
  <span>3. Wew w ew wl we/ wewe we we we we we we w we we.</span>
  <span>4. We we we wew ewe.</span>
  <span>5. Weeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
  <span>6. Wewewewe 
    scawewe or.</span>
  <span>7. Wewe we we </span>
  <span>8. We we we </span>
  <span>9. We we we </span>
</div>

和 flex https://codepen.io/gc-nomade/pen/VwKYmZp （这个看起来像一张 excel 表格......）

const sentence = document.querySelectorAll(".aligment > span");
let box = document.querySelector(".aligment");
let varCellWidth = "0";
for (i = 0; i < sentence.length; i++) {
  const words = sentence[i].textContent
    .trim()
    .split(" ")
    .map((s, i) => {
      return `<i>${s}</i>`;
    })
    .join("");
  let CellWidth = document.querySelectorAll(".aligment > span > i");

  for (ii = 0; ii < CellWidth.length; ii++) {

    let newWidth = CellWidth[ii].offsetWidth;
    let oldWidth = window.getComputedStyle(document.body, null).getPropertyValue("--CellWidth");
    if (oldWidth < newWidth) {
      document.body.style.setProperty('--CellWidth', newWidth);
    }
  }
  sentence[i].innerHTML = words;
  if (i == sentence.length - 1) {
    box.style.setProperty('--marginI', "0"); // no need to retrieve width anymore, they can spread the whole cell at this point
    box.style.setProperty('--flexD', "row");
  }
}

.aligment {
  --MarginI: auto;
  display: flex;
  border: 1px solid #000;
  flex-wrap: wrap;
  flex-direction: var(--flexD, column);
  border: solid;
  margin: calc(var(--CellWidth) * 1px / 2) calc(var(--CellWidth) * 1px);
}

.aligment>span {
  display: contents;
  border: solid;
}

i {
  margin: var(--marginI, auto);
  border: solid 1px gray;
  background: #4472c4;
  color: white;
  text-indent: 0.5em;
  flex:1 0 calc(var(--CellWidth) * 1px);
}

span:nth-child(5n - 1) i {
  background: #c65911;
}

span:nth-child(5n) i {
  background: #548235;
  color: white;
}

span:nth-child(5n + 1) i {
  background: #ffd966;
  color: black;
}

span:nth-child(5n + 2) i {
  background: #111;
}

<div class="aligment">
  <span>1. Wihu kw jw kwjew we wekjwe w.</span>
  <span>2. Wewewe jwe k ew k.</span>
  <span>3. Wew w ew wl we/ wewe we we we we we we w we we.</span>

  <span>4. We we we wew ewe.</span>
  <span>5. Weeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
  <span>6. Wewewewe 
    scawewe or.</span>
  <span>7. Wewe we we </span>
  <span>8. We we we </span>
  <span>9. We we we </span>
</div>

【讨论】：

非常感谢你的回答我真的很感激，我很惊讶你在旅途中设计了它，你是一个优秀的程序员。 span 中的拼写只是一个小错误：“:”之后的 nth-child(5n - 1) 是空格。 G-Cyrillus 我只是想写信给你解决了这个问题，谢谢，我想我爱你，哈哈。我只是替换了 grid 来显示：inline-flex 和 flex-wrap: wrap;它就像我想要的那样工作。
也添加了一个 flex 示例：
谢谢。我只是发现了一个问题，在使用另一个 javascript 后，它删除了所有空格，我收到了这个->thankyou.Ijustspotoneissue，在使用另一个 javascriptitdeletedallwhitespacesandireceivethis 之后？
你可能把 .split(" ") 变成了 .split("") 。您应该显示您的代码，或者如果该代码已解决有关 flex 和捕获到单元格中的单词的问题，您应该提出另一个问题；）顺便说一句，正确答案）
不，.split(" ") 保持原样，好吧，我会尝试自己解决它，然后提供解决方案或新的单独问题，谢谢。跨度>