12 CSS Layout Solutions Using Basscss's Flex Object
The Flex Object is a lightweight, utility-centric abstraction of the Flexible Box Layout Module, which can handle many CSS layout problems with a handful of simple, easy-to-internalize styles. These styles can serve as a common interface for styling elements in a one-off fashion, or controlling page layouts, partials, helpers, or components in React, Angular, and other templating engines.
Many of the examples in this post are inspired by Philip Walton's excellent Solved by Flexbox project. While browser support for flexbox is somewhat limited, it can easily be used in conjunction with other float, display table, or inline-block layout methods to support IE.
1. Vertical Alignment
One of the most obvious use-cases for flexbox, is vertical alignment. To vertically align elements with the Flex Object,
add the .flex
and .flex-center
classes to the parent container and set a height. This demo uses min-height 100vh to fill the height of the viewport.
To horizontally center the child element, use the .mx-auto
class to set margin auto on the x-axis.
2. Sticky Footer
To ensure that a page's footer stays flush to the bottom when the content is shorter than the height of the viewport,
use a combination of .flex
and .flex-column
on the body element or other parent container and set its min-height to 100vh.
Add .flex-auto
to the main content area to make it fill the available space.
3. Holy Grail
The Holy Grail layout is a classic CSS layout problem with several different possible solutions. The layout consists of a header, three columns, and a footer. The center column should be fluid, with fixed-width columns to the left and right, all columns should have equal height, the left column should be after the main content in HTML source order, and the footer should stick to the bottom of the viewport if there's not enough content to fill the space. For more on this layout, see the A List Apart article.
This demo uses the same technique as the sticky footer example, along with the .flex-first
utility to visually change the order of the columns.
By default, the columns will all be equal height when using display flex on the parent.
Each fixed-width column uses inline-styles, but you may want to use a grid system or some custom CSS to better handle the layout at small viewport widths.
4. Input Groups
To group buttons or other elements with inputs, add .flex
to a container element and remove margins from the child elements.
Borders and border radii can be controlled using utility styles.
5. Media Object
The Media Object
is a classic OOCSS solution for setting a fluid column next to an image. To acheive this with the Flex Object, add .flex
to the container element and .flex-auto
to the Media Object's body. To vertically center the body, add .flex-center
to the container. This technique can also be used for multiple combinations of images and other content.
6. Automatic Grid
To create columns that automatically fill the amount of space available, add .flex-auto
each column. This is handy when the number of items in a row dynamically changes.
7. Grid with Individual Column Sizing
Setting a width on one or more columns can allow for more fine-grained control.
8. Responsive Grid
To only set display flex from a certain breakpoint and up, use .sm-flex
, .md-flex
, or .lg-flex
.
The flex context for child elements will only be enabled from that breakpoint and up, so all other Flex Object utilities stay the same.
Add .flex-wrap
to rows where columns should wrap, and use grid column width utilities to set different widths for different breakpoints.
9. Nested Grid
To nest elements, add .flex
to the column that contains nested columns.
10. Staggered Boxes
To stagger content differently than its source order in HTML, use the .flex-first
or .flex-last
utilities.
11. Equal Height Columns
Columns with different amounts of content should be the same height by default. To ensure that nested elements also maintain equal height, add .flex
to the parent column.
12. Cards
Taking this same approach, you can create a collection of cards, that maintain the same height per row. Percentage based grid utilities are used to set different widths at different breakpoints. This method also works well when the number of items changes dynamically.
Further Reading
For more on how to use the Flex Object, check out the documentation. Additionally, this CSS Tricks article explains most of the basics of flexbox, and the specification should clear up any other questions you might have about how flexbox works: CSS Flexible Box Layout Module.