The complete Flexbox guide.

Introduction

Flexbox, also called Flexible Box Module is the most used modern layout system. The main goal of flexbox is to allow items fill the whole space inside of the container, depending on the rules you set. Flexbox makes it very simple to align items vertically and horizontally, items will easily align and fit the space. It makes responsive design a lot easier.

If you do not need to support old browsers like IE8 and IE9, Flexbox is the tool that lets you forget about using old and annoying things like: Table layouts, Floats, Clearfix hacks, display table hacks and many more.

Let's dive into this Flexbox guide to learn all the basics, and be ready to start using flexbox in your own projects.

Enable Flexbox

A Flexbox layout is applied to a container by setting display: flex; or display: inline-flex;. By setting this the content inside the container will be aligned using Flexbox.

This will initialize this container as a flex container and apply some default flex properties.

Flex Direction

flex-direction allows you to control how the items in the container display. Do you want them left to right, right to left, top to bottom, or bottom to top? You can do all of these easily by setting the flex-direction of the container.

The default arrangement after applying display: flex is for the items to be arranged along the main axis from left to right.

Justify Content

justify-content is a property to align items in the container along the main axis. This changes depending on how content is displayed. It allows us to fill any empty space on rows and define how we want to ‘justify’ it.

Here are our the most common options used to justify content: flex-start | flex-end | center | space-between | space-around.

Flex Align Items

align-items allows us to align items along the cross axis. This allows content to be positioned in many different ways using justify-content and align-items together.

Here are the most common options used to align items: flex-start | flex-end | center | baseline | stretch

For stretch to work how you would expect, the height of the elements must be set to auto instead of a specific height.

Flex Wrap

Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. There are three values you can use to determine when elements go to another row.

The default value is flex-wrap: nowrap;. This will cause everything to stay in one row from left to right.

flex-wrap: wrap; will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.

flex-wrap: wrap-reverse; also allows items to pop to the next row but this time the items are displayed from right to left.

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Properties for the flex items

Since now, we’ve seen the properties you can apply to the container.

Single items can have a certain amount of independence and flexibility, and you can alter their appearance using those properties:

order | align-self | flex-grow | flex-shrink | flex

Align Self

An item can choose to override the container align-items setting, using align-self, which has 5 possible values.

flex-start: align to the top of the container.
flex-end: align to the bottom of the container.
center: align at the vertical center of the container.
baseline: display at the baseline of the container.
stretch: items are stretched to fit the container.

Flex Grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others

Flex Shrink

Flex shrink defines the ability for a flex item to shrink if necessary. It's the opposite of flex grow. Negative numbers are invalid.

Flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters flex-shrink and flex-basis are optional. The default is 0 1 auto, but if you set it with a single number value, it’s like number 1 0.

Order

Items are ordered based on a order they are assigned. By default every item has order 0 and the appearance in the HTML determines the final order.

You can override this property using order on each separate item. This is a property you set on the item, not the container. You can make an item appear before all the others by setting a negative value.