Flexbox Basics

Flexbox is a set of simple CSS rules that allow you to further manipulate the order and structure of your web design. There are other complementary methods such as float/clear, grid, absolute positioning, but flexbox should be in every coder's repertoire. This tutorial is to help you get your feet wet

The very first thing that you need to do to start working with flexbox is to make your container a flex container. To do this, we utilize the following code in our container's CSS: display: flex;

Congratulations! You have a flex-container. What does this mean? All of the directly descended children of your flex container are not flex items. We can affect the layout, order, and even size with a few simple lines of code. We can even embed a flexbox inside of another flexbox.

What happens to my flex items? Well, they still live in your flex container and they are still completely customizable. If there are many of them, they will now be displayed in a row because that is the primary state for flex items. To use a flex container and still have columns, you can define flex-direction: column;. This can be a quick way to change up your layout. Flex direction values are:

• row - default
• row-reverse - arranged in a row, but order is reversed
• column - arranged in a column in order of the HTML
• column-reverse - arranged in a column, but the order is reversed

My go to use of flexbox is centering items within their container. Let's try centering an item both vertically and horizontally.

Say we have an item inside of a container that we have designated as a flex container. As soon as we designated our container as flex, all of the flex items within will shift to be displayed as a row. Because we only have one item, this will not be apparent, but still important to know. Our main axis right now is horizontal. To adjust the horizontal placement of our flex item, we use justify-content to adjust its location on the main axis. Well, we want it center, so we use justify-content: center;

Next we want to center it vertically so it is front and center in our flex container. We can accomplish this by combining our justify-content: center; property with the property align-items: center;. Remember our main axis is horizontal by default and being affected by justify-content. Our cross axis is vertical by default and is affected by align-items.

In addition to center, justify content can also take the values

• flex-start - moves items to be grouped at start of container
• flex-end - moves items to be grouped at end of container
• space-between - moves items so first and last items are at edges of container and remainder spaced evenly
• space-around - Items evenly spaced except half space before first item and after last item
• space-evenly - Items are spread out with an equal amount of space between all.

Align items also accepts and will default to stretch which makes the item stretch to fit the container unless an explicit height is listed.

Occasionally, you might find that your flex items do not fit comfortablly in their flex container. Because flexbox has a default flex-shrink: 1;, they will squeeze all onto the same row (or column if the flex-direction has been set to column). This is responsive, but can ruin your layout and contents of those items may become difficult to read or access. If we adjust flex-shrink, we still may get items overflowing off the page. We can solve this with the flex-wrap property. Flex wrap has three possible values:

• nowrap - the default value which gives the effects described above
• wrap - items will move down to the next column/row when in overflow
• wrap-reverse - similar to wrap, but the order places the overflow items on the current row/column and moves the others to the next row/column

Below are a normal flex container (left) and one with flex wrap set to wrap (right). Note how none of the flex items have been shrunk to fit.

In addition to the order changes that can be made using flex direction, it is also possible to change the order of our flex items. To do this, we target the flex item itself, NOT the container. We can use the propertyorder followed by a positive or negative integer. The lower the number, the higher its priority in the ordering of all of the flex items. So a flex item with order: 6; will be listed after an item with order: 3;. The default order for any particular flex item is 0.

Below we have a flex container where I have changed the color of two boxes to keep track of them (left). On the right, the order property has been changed for the orange and pink divs with values of -1 and 10 respectively.