Is it possible to define a preferred break spot in a flex box that has word wrap enabled?

There is a similar question here:

Linebreak in a column flexbox

And this one:

How to specify line breaks in a multi-line flexbox layout?

But they are not the same.

I cannot use Grid because it is not supported. It must be flex box.

Basically, I have about 10 items in a Flexbox row. If they can't all fit I want them to break and wrap to a new line at the 8th item. I'd like "break at item 8 if all items can't fit on one line" if that makes sense.

CodePudding user response：

I didn't understand your question well, but i think you can use flex-basis on your items for pushing some of them to the next line. by increasing the flex-basis of item last one begin to go to the next line. don't forget the use flex-wrap: wrap; and width: 100%; on your container.

CodePudding user response：

I think you need something like this. You need to add flex-wrap:wrap; to the parent item and use max-width on the child based on the viewport. When the combined width will reach 100%, the next element will break.

After adding flex-wrap you are already wrapping the elements, the width will just expand and hold it to a specific screen resolution.

I hope this is what you need!

* {
  margin: 0;
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /*EXTRA STYLES*/
  gap: 15px;
  padding: 15px;
}

.child {
  max-width: 11vw;
  width: 100%;
  /*EXTRA STYLES*/
  padding: 15px;
  background: #fefefe;
  border: solid 1px #dcdcdc;
}

<div class='parent'>
  <div class='child'> 1 </div>
  <div class='child'> 2 </div>
  <div class='child'> 3 </div>
  <div class='child'> 4 </div>
  <div class='child'> 5 </div>
  <div class='child'> 6 </div>
  <div class='child'> 7 </div>
  <div class='child'> 8 </div>
  <div class='child'> 9 </div>
  <div class='child'> 10 </div>
  <div class='child'> 1 </div>
  <div class='child'> 2 </div>
  <div class='child'> 3 </div>
  <div class='child'> 4 </div>
  <div class='child'> 5 </div>
  <div class='child'> 6 </div>
  <div class='child'> 7 </div>
  <div class='child'> 8 </div>
  <div class='child'> 9 </div>
  <div class='child'> 10 </div>
</div>