# Flex Object

The flex object can help solve many page-level and micro layout problems and can be combined with other utilities for a wide range of applications. This guide demonstrates several solutions to common layout problems using the flex object and other Basscss utilities.

Many of the examples in this post are inspired by Philip Walton's excellent [Solved by Flexbox](http://philipwalton.github.io/solved-by-flexbox/) project. ## 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. ```html

Vertically Aligned Div

``` ## 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. ```html

Flex Object Sticky Footer

Main content area

``` ## 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](http://alistapart.com/article/holygrail). 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. ```html

Flex Object Holy Grail

Main content

Sorry it's not 100% responsive, but the sidebars have to be fixed width for this demo.

``` ## 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. ```html

``` ## Media Object The [Media Object](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/) 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. ```html

Media Object

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, soluta, ut obcaecati, laudantium nobis.

Centered Media Object (aka Flag Object)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, soluta, ut obcaecati, laudantium nobis.

Double-Sided Media Object

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, soluta, ut obcaecati, laudantium nobis.

``` ## 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. ```html

.flex-auto

``` ## Grid with Individual Column Sizing Setting a width on one or more columns can allow for more fine-grained control. ```html

1/2

auto

1/3

auto

1/4

auto

1/3

``` ## 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. ```html

.col-6

.col-6 .md-col-3

.sm-col-6 .lg-col-2

``` ## Nested Grid To nest elements, add `.flex` to the column that contains nested columns. ```html

.flex-auto

``` ## Staggered Boxes To stagger content differently than its source order in HTML, use the `.flex-first` or `.flex-last` utilities. ```html

Resize the viewport to see the effect.

.flex-auto

``` ## 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. ```html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia qui tempore, odio sit ad magni eaque expedita fugit autem, error, facilis excepturi omnis. Pariatur iste possimus soluta quos, deserunt, laborum.

Equal height column

``` ## 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. ```html

Card

Card that is taller than the others

Card

```