Responsive Definition Lists: Solved by flexbox
Posted by Luke on the
Filed under technology, webdev
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 dt
or 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?