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.

7,821 5 35