What is Flexbox?
Flexbox is a CSS layout module that provides an efficient way to dynamically layout, align and distribute space among items in a container.
How to use it
Define Container
To start using flexbox, create a div element within the HTML, then define that element to be a flex container within the CSS. This sets the elements inside of the container to be child elements affected by the flexbox settings. Keep in mind that default configurations have already been set at this point.
<div class="container">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
.container {
display: flex;
}
Direction
Next, configure the direction that you want the child elements to be layout: row or column.
.container {
flex-direction: row;
flex-direction: column;
}
Here is an example of the 2 directions. Row (set by default) lays out the element horizontally, whereas column sets the element vertically.
Wrapping
Next up, configuring wrapping. By default, the child elements will all try to fit into one line. Changing this setting allows you to control what happens to the child elements in case of overflow.
.container {
flex-wrap: nowrap;
flex-wrap: wrap;
}
Take a look at the examples below. No wrap (set by default) is squeezing all of the elements to be on the same line, whereas the wrap setting pushes them onto the next line.
Gaps
Now that you have understood the basic layouts, consider configuring gaps. Gaps can be set at the row or column level, and they define the spaces between the child elements. The default value for both is 0.
.container {
column-gap: 10px;
row-gap: 10px;
}
Consider the following examples. The first example has 3 elements laid out horizontally (flex-direction: row) and there are 10 pixels of spaces between the 1st and 2nd element, and 2nd and 3rd element. In the second example, the elements are laid out vertically (flex-direction: column) and the gaps are set to 10 pixels by rows, as the vertical spaces between each element indicate.
Justifications
A couple more to go. Configuring justifications. This setting allows you to set the horizontal location of the child elements. Let's look at 2 common use cases: center and space-between.
.container {
justify-content: center;
justify-content: space-between;
}
In the top example from the image below, you will see 1 element inside of a flexbox centered horizontally. This can also be achieved when more than one element exists within the container. In the bottom example, there are 2 elements spaced apart, hence the keyword space-between: one on the left, and the second on the right.
Alignment
Almost done. Lastly, you can also configure alignments. This is very similar to justifications with a few differences. Alignments allow the vertical location of the child elements to be set. Let's try using 2 commonly used keywords: center and stretch.
.container {
align-items: center;
align-items: stretch;
}
The first example is using the center keyword. As you can see, while the height of the container is set at 200 pixels, the element is laid out in the center of the vertical axis. In the second example, there are 2 elements in one row, but the height of both elements is "stretched" to fix the 200-pixel height of the container.
Explore
Now that you've learned the basics, try them out in your projects! As you test them locally, you can use Chrome DevTools to inspect and CSS Flexbox. Here is a guide to doing just that! Consider checking out some of the links below as well.
Learn more about Flexbox
