Responsive Definition Lists: Solved by flexbox
Posted by Luke on the
Consider the definition list. Here's a simple example. The standard behaviour would have the term and definition both as block level elements, naturally stacking down like so.
But what if we want the term and definition to sit inline? This usage is semantically a dl, but traditionally, this has been a serious pain in the ass if you want consistent spacing between the terms/definitions. The image below exhibits a compromise I made with the designer on a previous project. Making the dt/dd inline-block works to a certain degree, however, when setting widths explicitly you will have serious issues going down the breakpoints. The
display:block span just forces the content to stay in it's respective line. This, however, is not correct usage, as a
dl is only supposed to have
dd elements inside it. EDIT: Since working on this project, it looks like we're now permitted to wrap a
dt+dd group in a div to control flow. So how can flexbox help us here?