Flex Your CSS

Flex container cross axis and main axis

The Basics

Flexbox (The Flexible Box Module) is a CSS property created as a one-dimensional layout model. Developers can use flexbox to create consistent and flattering distribution of space between elements within applications. Flexbox’s one dimensional characteristic refers to how it is used. As in the picture above, everything within flexbox is dealt with on either the main-axis or the cross-axis. Personally I like to refer to them as the x and y axis, but whatever helps you visualize and understand is best!

Main Axis

The main-axis runs across the width of the window by default. As stated before, you can think of it as the x-axis. However, it can be defined with the flex-direction property. Flex direction has four possible values you can set: row, row-reverse, column and column-reverse.

row is the default value, while row-reverse keeps the main-axis running across the width of the window, but the start and end points are reversed. Meaning that the start would be on the right and the end on the left, assuming that you are using the standard left to right pattern of the English language.

Start and end points with flex-direction: row;

column and column-reverse act the same way in terms of reversing the start and end points of the axis. However, the column value will align the elements in a column, effectively changing the main-axis to run vertically in the window. It’s important to note here that flex-direction: column; also causes the cross-axis to run horizontally across the window. Remember that whatever value flex-direction has, acts on the main-axis, and the cross-axis automatically runs perpendicular to the main-axis.

flex-direction: column; -> cross-axis runs horizontally

Flex Container

In order to create a flex container, we simply set the display property of that item to flex or inline-flex. The direct children of the flex container then become flex items. Flex items will have some default properties:

• Items will be displayed in a row ( flex-direction: row; )
• Items will start from the ‘start’ edge of the main-axis
• The items do not stretch on the flex container, but can shrink.
• Items will stretch to fill the size of the cross axis.
• flex-basis is set to auto
• flex-wrap is set to nowrap

Flex-wrap and Flex-flow

flex-wrap is a flex container property that causes your flex items to wrap to the next line when the value is set to wrap. If flex-wrap is set to nowrap the items will not wrap to the next line. Instead, they will shrink to fit on the line where they are.

flex-flow is a shorthand property that allows for the setting of both the flex-direction and flex-wrap properties in one. For example, flex-flow: row wrap; would say that the main-axis should be aligned as a row and also wrap to a new line if the flex-container is too small to contain the items in one line.

Flex-grow, Flex-shrink, Flex-basis

flex-grow, flex-shrink and flex-basis are all properties of flex items that determine how available space is used. Consider the following image:

Available space visualization

Flexbox will automatically put available space after all flex items on the main-axis. The aforementioned properties allow developers to handle the available space along the main-axis. Again, it’s important to note that these properties deal with the main-axis. Remember that the cross-axis runs perpendicular in relation to the setting of the main-axis.

You can read more on controlling the ratios of available space on the main-axis in the MDN documentation here.

More often than not, these properties will be controlled using the flex shorthand. Using integers the flex property could look something like this flex: 1 1 auto;. The first value refers to flex-grow and allows the item to grow, second is flex-shrink which allows the item to shrink if it causes an overflow on the main-axis and the third is the base value used by the items to grow or shrink from.

Alignment

Alignment of flex items is controlled by the justify-content and align-items properties. justify-content controls the alignment of flex items in relation to the main-axis. The align-items property controls alignment of flex items in relation to the cross-axis. As the flex-direction value changes the main-axis, so to do justify-content and align-items adjust. For each property there are several values that can be used. Flexboxfroggy.com offers a great game to explain and practice the use of these values and other flexbox properties. I highly encourage you to take advantage if you are looking to become more comfortable with flexbox.

As always, thank you for reading. I hope this quick explanation helps you to understand the basics of flexbox and in turn you create some beautiful responsive layouts for both web and mobile applications! Don’t forget to refer to MDN documentation for help with flexbox if necessary.