Flexbox!

Flex row with items to the left, right, distributed

justify-content controls the distribution of items along the main axis. The default is flex-start.

Left

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Center

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Right

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Space between

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Space around

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Flex row with split items (auto margin)

Aside from distributing items using justify-content, you can space items by using regular margins.

To split the items, use a margin setting of auto on one of them.

Simple spacing with margins

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Flex row with items that grow, shrink, or both

The flex property controls the size and flexibility of the flex items. It is actually the shorthand for three properties - flex-grow, flex-shrink, and flex-basis. But since they work closely together, you should generally set all of them at once.

It's important to note that flex is applied to the child flex items themselves, not the parent flex container.

The flex-basis is the size of each item before any growing or shrinking happens. auto is the default, which refers to an element's width setting, if it has one. Otherwise it behaves like content, and is based on the element's contents.

The default is flex: 0 1 auto. That is, don't grow, yes shrink, auto width.

Grow

• 1
• 2
• 3
• 4
• 5

Shrink

• 1
• 2
• 3
• 4
• 5

Grow and Shrink

• 1
• 2
• 3
• 4
• 5

Ratios

Items can grow and shrink at different rates. The effect of this is not always obvious, since flexbox calculates the grow and shrink factors after allotting the flex-basis size to each item. To make it more obvious, we can set the flex-basis to 0.

• 1
• 2
• 3
• 4
• 5

Flex row with items of different heights

Very often your flex items will have varying heights. By default, they will all stretch to match the height of the tallest item (an excellent feature!). The align-items property controls their alignment on the cross axis, which usually means vertically.

You can also align an individual item differently from the others using the align-self property (not shown).

Stretch

• 1
• 2
• 3
• 4
• 5

Start

• 1
• 2
• 3
• 4
• 5

End

• 1
• 2
• 3
• 4
• 5

Center

• 1
• 2
• 3
• 4
• 5

Baseline

• 1
• 2
• 3
• 4
• 5

Flex container with single centered item

This used to be much harder.

Flex row with items that wrap

When you set an element to display: flex, you're also giving it properties for flex-direction and flex-wrap. To change these, you'll usually use the shorthand flex-flow property.

The default is flex-flow: row nowrap. Here is flex-flow: row wrap:

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Flex row media object and text side-by-side

Media objects like photos often have captions or text associated with them. Putting those elements side-by-side is a good use case for flexbox. It also allows you the option to reverse their display order without changing the HTML.

To lay out the flex items in a different order, set the flex-direction property to either row-reverse or column-reverse. Again, flex-direction is usually specified as part of the flex-flow shorthand, e.g. flex-flow: row-reverse nowrap.

Joined: today
Post count: 1

I have something to say.

Joined: 3 years ago
Post count: 788

You are not a sloth! False advertising!

Joined: 1 year ago
Post count: 67

Sup.

Flex row using order properties

Flexbox also has an order property, which lets you change the visual order of the flex items. While it can be handy, use this property very judiciously, as it does not change the tab order or anything else about the source HTML. If what you're trying to accomplish isn't purely visual, just change the order in the HTML.

By default, the order setting on all the flex items is 0, so they will respect the source order. By setting any item to a higher value, it will bump to the end. Negative values will move an item to the beginning.

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

Flex cards with sticky footers

"Cards" are a very common component in web layouts. Here's an example with multiple cards side-by-side. In this case the cards (in orange) are being laid out horizontally using flexbox, but you could also use grid for this part.

The key here is that each card is set to display: flex, which makes it both a flex item and a flex container. With their main axis flipped vertical (flex-flow: column nowrap), the flex-grow setting will expand the inner items (in green) vertically, instead of horizontally.

• Short text.

• This text is much longer which makes it stretch the vertical height of our outer flex items (orange). The default value align-items: stretch on the outer flex container is making their heights match.

  The inner flex container is switched to the column direction. Setting flex-grow on the paragraph is making the shorter one fill the available height, pushing the footer down.