Flex Box Tutorial

Introduction

Soon after the creation of the World Wide Web, it became apparent that websites needed styling for readability and design. For those reasons, Cascading Style Sheets (CSS) were invented. These days, CSS is used on most websites. Spacing and alignment is essential to design, and there are many ways accomplish this in CSS. One of those is called a flex box. As described in the name, a CSS flex box is flexible and is generally used as a dynamic way to align and resize content. Although flex boxes are a relatively new addition to CSS, they are supported by all major browsers. In this tutorial, I will show you how to create and use the flex property to position data in rows and columns. By the end you should be able to create a simple column layout using CSS flex boxes.

Flex Containers

HTML has several elements that are meant to hold other elements inside of them, such as <div> , <article>, <section>, and <form>. When an item is placed in one of these containers, the item is positioned according to the rules and styles of that container. If one of these containers is styled as a flex display, these “container” elements become flex boxes. To do this, assign display: flex style to the container element that you want to become a flex box.

Basics

By default, block items each start on a new line in HTML. Items that are placed in a flex container, however, are positioned in a horizonal row. Items wrapped in a flex container are called flex items. Below is a CodePen example of a flex container with three flex items. Click on the "CSS" button to see the code. Feel free to change the code and experiement.

See the Pen Flex Box Part 1 by JJ Stephens (@josiahstephens) on CodePen.

As you can see, the items are in a row. If you don't want the container to align the items horizontally, just add flex-direction: column after display: flex and the items will be displayed vertically.

Spacing

In the example above the flex items were placed right next to each other, but usually there will need to be some spacing added to make the content more readable. One method to accomplish this is justify-content. This attribute controls the spacing in the direction of the flexbox. There are three main ways of spacing out items with justify-content:

Space between

Puts space between every flex item, but no spacing between the edge of the flex box and the items on the edge.

Space around

Puts the same amount of spacing around each item. Since the edges of the container do not get spacing, this means that the items on the edge of the container will have half as much spacing between them and the edge compared to the other items in the container.

Space evenly

This is very similar to the space around property, but it puts the same amount of spacing between each item — including the edges.

No one style of spacing is perfect for every situation, but between the three of them you can usually find something that will work for your situation.

See the Pen Flex Box Part 2 by JJ Stephens (@josiahstephens) on CodePen.

Alignment

Justify content can be used to align content in a flex container as well. The alignment options for justify-content are flex-start, flex-end, and center. But, if you use justify-content to align items, you will not be able to use it to put spacing in between items. To fix this, CSS developers added a gap property to flex boxes. Gap is a flex property that will add a gap of a certain distance between each flex item.

Sometimes it is necessary to align items in the opposite direction of the flex box. To do this, use align-items. Like justify-content, align-items can be set to flex-start, flex-end, and center. This is especially useful when trying to align images and text contained in the same flex container.

Wrap

As you start to add more content to your flex container, the container can fill up and overflow. This can make your site look really bad. Splitting the content into more flex boxes is an option, but this isn't a great choice because the whole point of flex boxes is that they are dynamic, meaning that they can adapt to different situations. One option to solve this problem is flex-wrap, which will wrap overflowing content onto the next line. Wrap-reverse is also an option, which wraps in the opposite direction as normal. In the example below, click on the CSS button and try changing the code from wrap to wrap-reverse or nowrap and see what happens.

See the Pen Flex Box Part 3 by JJ Stephens (@josiahstephens) on CodePen.

Wrap, like the other flex properties, is dynamic. This means that if a user resizes the window, the flex items will rearrange based on how much room is available. If you were making a gallery of pictures, for example, using flex wrap would make it so that the pictures move to the next line before they are cut off from the view.

Flex Containers in Flex Containers

Sometimes a single flex box isn't enough to get your content to look exactly how you would like it. In these cases, a good option is to embed flex containers in other flex containers. Flex containers can hold other flex containers inside of them. The embedded flex container acts as a flex item in the parent container. Below is an example of a situation where this could be useful.

See the Pen Flex Box Part 4 by JJ Stephens (@josiahstephens) on CodePen.

As you can probably tell, using flex containers inside of other flex containers can be very powerful. Dynamic menus, forms, and articles can be quickly and easily made with only a few lines of code.

Flex Item Properties

Some flex properties should be applied directly to flex items inside of flex boxes instead of to the containers themselves. These properties include flex-grow, flex-shrink, flex-basis, and order. The former two (flex-grow and flex-shrink) basically tell the browser to try to make the items change size if possible. Giving them the value of 1 sets them to true, and giving them the value of zero sets them to false. In the example below, I added the flex-grow property in the CSS code. This made the “contact info” and “things I like to do” grow to fill the container since there is room to grow. Similarly flex-shrink allows items to shrink if there is not enough room in the container.

See the Pen Flex Box Part 5 by JJ Stephens (@josiahstephens) on CodePen.

Often flex-grow and flex-shrink will be enough for you to accomplish your design goals, but sometimes you need to be more specific. Flex-basis is an option that allows you to indicate exactly what percent of the flex container you want the item to fill. I often use this property with images because often images seem to be too large or too small in the flex box. This is an efficient way to ensure that they stay a good size.

To change the order of items in a flex box, add the order attribute to a flex child. This is useful for when you want items to appear in a different order than they appear in the HTML. To use order, you need to assign it a value. This value corresponds to the index at which you want the item to appear. Add order: 2 to the CSS section of the example above. Notice how the order changes.

Conclusion

You should now be able to create a simple column layout using flex boxes! There are many ways to resize, align, and space content on a website. Flex is a new and powerful way to accomplish dynamic layouts quickly and easily. By using flex boxes, web designers can create professional designs that look good on any window size.

References

The CSS Flex Box documentation covers flex boxes in complete detail. The documentation covers everything that I was not able to cover in this tutorial, including order, flex-grow, flex-shrink, and flex-basis. This site is somewhat technical but will be very helpful for people who already have a good knowledge of CSS.

Mozilla has a very comprehensive website that explains everything about CSS. The general description of flex boxes is very good, and is more beginner oriented. They also give code examples to show you how to use different flex properties and the syntax associated with them. This is the best resource I found to describe flex boxes in general.

CSS Tricks gives a beginner guide to flex boxes that helped me learn a lot about them. They explain alignment very well through examples and graphic depictions. The section on gap is especially good and will help someone who is struggling to grasp exactly how it works.

Flexbox cheat sheet is a good resource for intermediate web programmers who already understand the basic concepts of flex boxes but struggle to remember the syntax. The site has a list of all the different ways to style a flex container organized neatly for easy reference.

Flexbox Froggy is an interactive game that gives you hands-on practice at using the flex box property. My first introduction to flex boxes was through Flexbox Froggy. The game has 24 levels that go over the basics of flex box, including justify-content and align-items. It is a really good resource for somebody who has never made a flex box.