display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text

Question

I need to use display: inline-flex; AND flex-wrap: wrap;. These two values of flexbox I think are blocking each other. Each sentence is wrapped in span inside flexbox. If the sentence is short enough, it will be displayed next to another sentence like I want, but still following sentence won't fill the remaining space.

What I want to achieve:

My current code:

.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>

Before I connect the CSS the text is displayed like I wanted, breaking at full sentences and filling the spaces. After I connect .css file, the sentence is not breaking until their width is 100%.

white-space: normal !important; doesn’t work as well or basically anything I found. Maybe min-width is the answer but I haven’t figured out how to make it working. I know that this problem appears because inline-flex treats sentences really as blocks not lines.

Any ideas using css, javascript or html?

Maybe it is so obvious that no one before had problems with it, but I have and I can’t find a working solution. For example these doesn’t work: How to specify line breaks in a multi-line flexbox layout?

Why do you need to use them? What is the reason that you want to use flexbox? — stijnb1234, Nov 28 '20 at 10:40
Set a snippet with what you try and what you want to demonstrate your issue. Maybe you need something else than flex. — G-Cyrillus, Nov 28 '20 at 10:45
Thanks @stijnbannink for editing. G-Cyrillus the case I need to use flex because later I will add more javascript coding to it and even it is not like exactly like I want it is closer to what I want than without it. If you don't have an idea in 5 s don't bother I do not want to steal your precious time, I thought maybe it is obvious to everyone except me. I seriouls browsed like 20-30 pages with similar problems but nothing works and I couldnt find eaxct question, maybe it is a limitation which cant be overcome — SlaaneshCultist, Nov 28 '20 at 11:48
the thing is that a word is not a tag than can be dispatch into fraction(flex:1 for flex) and that flex works on a single level , the flex child is the span here not the words, a flex-child doesnt either wrap onto different rows or columns. if you also set the span as flex element , and add an image(html tag) among the text, you'll see the text aside wrapped into a virtual container and not each word acting as a flex child. you will need javascript and wrap each ords into a tag to which you can give the same width to fit in cell. — G-Cyrillus, Nov 28 '20 at 12:16
alright @G-Cyrillus I was being afraid of this. I prefer keep it that display: inline-flex; and flex-wrap: wrap; but it seems I will have to find something else. Thank you. — SlaaneshCultist, Nov 28 '20 at 13:22

G-Cyrillus · Answer 1 · 2020-11-28T16:55:38.987

Not sure if i totally understood, here is a possible approach via grid and javascript , where each words are wrapped into a tag from which we get the width to keep the largest as reference, then the sentence's container is removed virtually from the dom via dispaly:contents to keep the word a direct child of the grid.

https://codepen.io/gc-nomade/pen/VwKYKdj (the script needs to be optimized, but it's the basic idea.)

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>

and flex https://codepen.io/gc-nomade/pen/VwKYmZp (this one looks alike an excel sheet ...)

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>

Thank you very much for your answer I really appreciate, I am amazed you designed it on the go, you are a good programmer. There is just a small mistake in spelling in span: nth-child(5n - 1) after ":" is space. G-Cyrillus I just want to write you solved this, thanks I think I love you lol. I just replaced grid to display: inline-flex and flex-wrap: wrap; it works like I wanted it seems. — SlaaneshCultist, Nov 28 '20 at 14:59
thank you. I just spot one issue, after using another javascript it deleted all white spaces and i receive this-> thankyou.Ijustspotoneissue,afterusinganotherjavascriptitdeletedallwhitespacesandireceivethis ? — SlaaneshCultist, Nov 28 '20 at 15:14
you probably turned `.split(" ")` into `.split("")` . You should show your code or probably make another question if that one is solved about the flex and words catched into a cell ;) *(you may upvote or downvote question if efficient or out of subject , you can also pick one as the correct answser btw)* — G-Cyrillus, Nov 28 '20 at 15:18
alright, thank you. Yes I wish but until I reach 15 points I can't uvpote. I won't forget you, may the Slaanesh be with you :) I will come back later to upvote. — SlaaneshCultist, Nov 28 '20 at 15:27
no, the .split(" ") remains the same like it was, alright I will try to solve it on my own and come back with a solution or a new separate question, thanks. — SlaaneshCultist, Nov 28 '20 at 15:31
did you use the same structure ? div.aligment > span and here your sentence ? — G-Cyrillus, Nov 28 '20 at 15:32
alright you was correct, I love your mind, you found a solution in seconds. It was here ".join("");", it is still in a code example. However if I change .join(""); to .join(" ") it shows a correct sentence with spaces but the first problem returns - happens exactly what I wrote in the beginning. Exactly like on the first picture. — SlaaneshCultist, Nov 28 '20 at 15:39
You have to share your code, if the snippet works, but not your code, there got to be something you missed or did wrong :) — G-Cyrillus, Nov 28 '20 at 15:41
alright you are correct, I will try this once again and come back with either solution or a code, thanks again. — SlaaneshCultist, Nov 28 '20 at 15:44

display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text

1 Answers1

Linked