Search the blog

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.