f-layout guide
f-layout is an easy to use alternative to grid layouts. A family of composable CSS classes designed to quickly enable responsive flexbox-based layout on IE 11+, Edge, Chrome, Firefox and Safari browsers.
Using CSS for laying out pages has always been tricky and before CSS3 was done mainly by misusing CSS features in order to get the job done. The idea behind f-layout is use modern CSS (now well supported in browsers) to create a small set of easily learned classes to enable web designers to build layouts quickly.
It uses the flexbox CSS model but tries to avoid complexity by surfacing only its most useful features and to have sensible defaults to make layout building as simple as possible.
In f-layout, all layout is either in a row or a column or a nested combination. Flow is from left to right, top to bottom. For element alignment, it follows CSS conventions of using terms like "left", "right", "top" and "bottom". It also uses the term "center" to denote horizontal centering as opposed to "middle" for vertical centering.
Elements can be hidden or shown and reordered. All of the features of f-layout can be applied responsively so as to deal with different device screen widths.
All classes can be suffixed with s, m or l and these suffixes correspond to screen width break points:
| suffix | meaning | break point |
| s | small | less than 600px |
| m | medium | 601px to 992px |
| l | large | more than 992px |
Row layout
Alignment defaults: f-space-between, f-middle
Left
Center
Right
Space between (default)
Space around
Top
Middle (default)
Bottom
Stretch (default)
Baseline
Column Layout
Alignment defaults: f-space-between, f-center
Top
Middle
Bottom
Space between (default)
Space around
Left
Center (default)
Right
Stretch
Self alignment
Finer-grained alignment of individual element be achieved with "self" alignment classes
Self Top
Self Middle
Self Bottom
Self Stretch
Self Baseline
Self Left
Self Center
Self Right
Self Stretch
Wrap Row
Normally all elements appear on one line but they can be made to wrap over multiple lines.Wrap Top
Wrap Middle
Wrap Bottom
Wrap Space Around
Wrap Space Between
Wrap Column
Wrap Left
Wrap Center
Wrap Right
Wrap Space Around
Wrap Space Between
Grow
Growing elements take the available space
Two growing elements share the space
Using with text alignment
Ordering
Responsive layout
Toolbar example with grow
Toolbar nested in a column with scrolling page that grows
Above example nested in row layout with responsive side navigation
Internet Explorer 11 Alignment
Alignment of items require that the element have a height or width specified or inherited. Simply specifying a max-height or max-width is not enough.