"br" is not friendly with the flexbox?

user_5211159 0
Viewed 13028

I got a table using flexbox and noticed one interesting feature: the br element can not do anything inside the flexbox.

Example:

.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
}

.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}

.new-row, br {
  display: block;
  width: 100%;
  height: 0px;
}
<p>Line break using div:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <div class="new-row"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<p>Line break using br:</p>
<div class="flexbox">
  <div class="item"></div>
  <div class="item"></div>
  <br>
  <div class="item"></div>
  <div class="item"></div>
</div>

In the example, div and br share the same properties, but div transfers elements to the new line, and br does not.

Why?

flexbox css html
3 Answers

One other option when using <br> in your code if you just have a single column of elements is to use flex-direction: column.

.flexbox {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
  padding: 2px;
  flex-direction: column;
}

.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  border: 2px solid blue;
}
<p>Line break using br:</p>
<div class="flexbox">
  <div class="item"></div>
  <br>
  <div class="item"></div>
</div>

user_6525190

Unlike Chrome, you must add whitespace (&nbsp;) after a <br> in order for it to work in Firefox.

By doing so, you will have the same result in both browsers.

Conlusion:

Works only in Chrome: <br><br><br>
Works in both Chrome and Firefox: <br>&nbsp;<br>&nbsp;<br>&nbsp;

user_174069420
Related