If you are using the excellent display: flex; with flex-wrap: wrap; and you have elements of varying widths, you may struggle to put your next item on a new line — especially if your elements are generated from data in a CMS. Forcing a line break is easy; just add an element that takes up the full width but has no height:
.flex-br {
width: 100%;
height: 0;
}
This will essentially accomplish the same thing as adding a br tag to a non-flexbox layout.
Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from
Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.