After creating a table using flexbox, I made an interesting observation: the br element seems to have no effect within the flexbox.
For 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 this scenario, the div and br elements are styled similarly, but div moves items to a new line while br does not.
Why is this happening?