{ css3 }

More Flexbox, Header with Wrapping Lines

Following the previous post on using flexbox for page layout, here is one on using it to dictate position of page elements.

In the codepend example below, I created a header component similar to this Line-On-Sides Header post from CSS-Tricks but by using flexbox. You should also check out the comments in that post for a variety of ways to approach the design. Flexbox is, by far, the simplest in terms of code needed.

No matter how the positioning is done. The most efficient way to draw the lines is utilizing the :before and :after pseudo-elements of the header container.


Column Layout Using CSS Flexbox

Flexbox is currently a W3C recommendation and only supported by (some) modern browser. But its approach is so much more native to how the web should behave. The concept also aligns well with the dominant responsive design. Flexbox seems destined to be the new standard one day.

Know all you need to know about flexbox from this CSS-TRICKS post and this ultimate cheatsheet.

Let's check out a column layout using flexbox.

A column-based layout typically involves assigning a float to the each column/block. Set a width to the column while also taking into account any margin or padding values.