1

* {
  margin: 0;
  padding: 0;
}

.cnt {
  display: flex;
  margin: 50px;
  background: #ffff00;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cnt div {
  width: 100px;
  height: 100px;
  background: #999;
  margin: 10px;
}

.cnt::after {
  content: '';
  width: 100%;
}

.flex-item:nth-child(6) {
  order: 1;
}
<div class="cnt">
  <div class="flex-item one"></div>
  <div class="flex-item two"></div>
  <div class="flex-item three"></div>
  <div class="flex-item four"></div>
  <div class="flex-item five"></div>
  <div class="flex-item six"></div>
</div>

The problem I have is that I can break line only on the last item... How am I actually able to brake line whenever I want it to? For example, if I want to break line after class .two, how can I do it?

EDIT

I'm an idiot. This is actually how you do it. You just need to pass the items you want to be in the next order. Obviously you may do this only once.

So, to break line in the second box, you need to pass the .three, .four, .five and .six to order: 1. See here: https://jsfiddle.net/r33muub3/4/ I changed the justify-content to left so it will be much more obvious

mizzo
  • 97
  • 2
  • 7

1 Answers1

0

After some extensive research, I have found that not only was my first response incorrect, but the method of adding a newline in the content: property is not what I indicated. I apologize.

The proper way to add a newline (as I found in this answer to a similar question) is to use not <br> but \A in the content: property, and additionally to format the style of the element created by ::after (or ::before) in the following fashion:

.two::after {
  content: "\A";
  white-space: pre;
}

While this bit of code does accomplish inserting a newline in the "anonymous element" created by assigning a content: property to an ::after-selected element, It does not solve this issue of dealing with <div> elements in a flex layout.

Again, many apologies for my previous incorrect answer. I have retained my previous answer in order to explain why it was wrong and to give more context to this answer.

Additional Resources:

My previous answer was incorrect:

Why: The .class::after {content: "";} statement does not place items after the selected element. Rather, it places its argument inside an anonymous element which is then appended to the existing contents of the selected element. See this site for a description of the ::after tag, and this page for information about the actual behavior of the content: property.

You can add a style:

div.two::after {content: "<br />";}

This will add a line break after every <div> element with class="two". The ::after selector will apply the style directly at the end of any matching element's contents. In this case, we add some text, a line break (<br />) to that space after a <div class="two"> using the content: CSS property. Note the quotes around the line break "<br />"; these ensure the argument is processed as a string.

Community
  • 1
  • 1
GameGibu
  • 106
  • 9