Problem
I have some heading elements with bottom borders. When the headings wrap, I have problems like this:
Of course, I could prevent wrapping, but then that could cause other problems and make for ugliness using or not using overflow.
Solution
While working in Chrome Tools, I had been noticing a number of possible values for the “display” CSS attribute. There is one that I came across that helped me out with a problem: flex.
Just like “block”, “inline”, and “inline-block”, “flex” affects the layout of HTML elements. There are actually a bunch of attributes that were introduced to CSS3 and can be found here:
Then I found that, just like many new CSS attributes, there are browser-specific prefixes that must be used. A useful example can be found here:
http://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex
So, I created a LESS mixin to make it easy for referencing.
.flex() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Final Result
When all is said and done, the issue looks to be resolved:
