Header rows flex layouts

Each header part (row) has three columns and their widths proportions may be set in two variants.

Flexible middle column

The first is called “Flexible middle column” and is set by default for all rows. The main feature of this variant is that left and right columns will take their width from the elements’ width added inside them. And the middle one will be flexible between them and take all the free space. This layout is preferable if you place your logo image in the left column, additional icons to the right column and your main navigation element takes the full width of your middle column.

Rows design examples:

Equal right and left columns

The second one is “Equal right and left columns”.  This layout has always right and left columns equal and they take all the free space in that row. And the middle one will take its content width. So for example, if you will add a logo image with 150px width, this column will not be wider. And left and right columns will take all the rest of the space. This kind is very useful if you want to have some element ideally centered in the row.

Header row examples with this layout: