Abdu's Garden

Flex Box

5 min read

What is it?

It’s a modern way of using CSS to arrange and orient HTML elements. Instead of using inline-block when you want to have things inline but with the margin and padding behavior of block elements.

How it works

In the element’s CSS, set the display of the element to flex. display: flex; If for example you had a div containing three other divs, the divs should now become inline instead of stacked, and they should automatically fill all available horizontal space equally.

Flexbox opens a new set of tools for us. Some belong to the ‘flex container’ while others are for the ‘flex items’. flex-container is any element with it’s display property set to flex. While flex-items live inside this container. An element can technically be both, you can have flex items that are flex containers with more flex items within!

You can make the flex container inline by adding an ‘outside’ display property, like so display: inline flex this means the flex container will be an inline element with regards to the rest of the page while lending its contents flex item status.

Flex model

The main axis is the axis running in the direction the flex items are laid out in (for example, as a row across the page, or a column down the page.) The start and end of this axis are called the main start and main end. The length from the main-start edge to the main-end edge is the main size.

The cross axis is the axis running perpendicular to the direction the flex items are laid out in. The start and end of this axis are called the cross start and cross end. The length from the cross-start edge to the cross-end edge is the cross size.

Set up

  • The parent element that has display: flex set on it is called the flex container.
  • The items laid out as flexible boxes inside the flex container are called flex items.
  • The property flex-direction sets the direction of the main axis, by default it’s set to row which sets the items to be arranged from left to right (in an English browser of course).
  • Sometimes, the flex items won’t have enough space to fit all in a line and may flood out of view, horizontally. This is where the flex-wrap property comes in. By setting it to wrap it will automatically push items to a new line when needed.
  • flex-wrap is one of the most important properties of Flex Box.

Hint

Setting flex-direction: column would not work as expected if we used the shorthand flex: 1. Try it out now (i.e. go change the flex value on the flex: 1 1 auto; line). Can you figure out why it does not work if flex: 1 is used? The divs collapse, even though they clearly have a height defined there.

The reason for this is that the flex shorthand expands flex-basis to 0, which means that all growing and shrinking would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don’t actually need to have any height at

Flex shorthand is very cool

flex-direction: row;
flex-wrap: wrap
/*Becomes...*/
flex-flow: row wrap

In addition to that, the property flex is also short for three other ones. flex-grow, flex-shrink, and flex-basis. For example, setting flex: 1 actually sets the value of ALL three of them to 1.

  • flex-grow: this is the growth factor for a div when it grows. We can set different factors for different divs. Otherwise, provided they have the same properties, they’ll grow uniformly.
  • flex-shrink: is similar to the previous property but determines the shrink factor instead.
  • flex-basis: is a percentage value and sets the initial size of a flex item. So any sort of flex-growing or flex-shrinking starts from that baseline size. The shorthand value defaults to flex-basis: 0%. The reason we had to change it to auto in the flex-shrink example is that with the basis set to 0, those items would ignore the item’s width, and everything would shrink evenly.

flex: auto is one of the shorthand options of flex. When auto is defined as a flex keyword it is equivalent to the values of flex-grow: 1, flex-shrink: 1 and flex-basis: auto or to flex: 1 1 auto using the flex shorthand. BUT is NOT the default flex values

Alignment

The property justify-content aligns items across the main axis. There are a few values that you can use here. Changing it to center, which should center the boxes along the main axis. To change the placement of items along the cross axis use align-items. Due to justify-content and align-items being based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change flex-direction to column, justify-content aligns vertically and align-items aligns horizontally. Setting gap property on a flex container adds a specified space between flex items, similar to adding a margin to the items themselves. For example: gap: 10px sets 10 pixels of “margin” space between the flex items.

Graph View

Backlinks