The Flexible Box Model, or flexbox for short, is a CSS3 layout model that provides a clean and straightforward way to arrange items inside a container. It’s great to use for the general layout of your website or app. It’s easy to learn, is supported in all modern browsers
CSS flexible box layout is based on the idea that we can give the container the ability to change the width/height of its items to best fill the available space according to the user’s device. The flexbox model completely responsive and mobile-friendly, and works well on all screen sizes.
Unlike the old block model, with flexbox, you don’t have to assign widths and use floats to arrange items on the page. Therefore, you don’t have to spend a lot of time calculating margins and paddings either. Flexbox takes care of all of this automatically. Furthermore, flexbox is direction-agnostic. The block model is vertically-biased, and the inline model is horizontally-biased. But flexbox works well for both.
Flexbox deals with layout one dimension at a time, which means it controls either rows or columns. This is in contrast to the two-dimensional CSS Grid layout, where you can work with rows and columns simultaneously. Flexbox is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
In this CSS flexbox tutorial, I will give you a detailed look into the inner workings of this module.
Terminology and Core Concepts
Before you can harness the real power of flexbox, you need a solid understanding of its basic concepts.
The most important concept to learn in flexbox involves the use of axes. The flexbox model is in fact based on two axes – a main axis and a cross axis – and they are perpendicular to each other. Depending on the values of the Flexbox properties, flex items will be laid out inside a flex container following either the main axis or the cross axis.
Here’s the basic flexbox terminology you need to learn:
- main-axis: The main axis refers to the primary axis of a container, along which child items are laid out. To change the direction of the main-axis is determined by the flex-direction property.
- main-start | main-end: These two properties show where item placement on the main-axis starts and where it ends.
- main size: The main-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.
- cross-axis: This is the axis that runs perpendicular to the main-axis. Therefore, if the main-axis is horizontal, the cross-axis will be vertical, and vice versa.
- cross-start | cross-end: These two properties show where item placement on the cross-axis starts and where it ends.
- cross size: The cross-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.
The image below summarizes these concepts in a single diagram.
Flex Container
Learning flexbox is easy. To get started, you have to make a container and set its display property to flex. An area of the document whose layout is implemented using the flexbox model is known as a flex container. The direct children of that container are called flex items. The code below creates a container with three items, and all the flex properties are set to their default values.
.box {
display: flex;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three
<br/>has
<br/>extra
<br/>text
</div>
</div>
Flex Lines
An imaginary line is used to group and align flex items inside their container. This is known as a flex line. You can think of flex lines as lines that run parallel to the main axis.
A flex container can consist of one or more lines. In a single-line flex container, all the items are laid out on a single line, even if the contents of the container overflow. On the other hand, a multi-line flex container separates its flex children across multiple lines. You can think of this like when text is broken onto a new line when there are too many characters to fit in one line.
Container-level properties
From here on, this CSS flexbox tutorial will be divided into two sections: container-level and item-level properties.
Properties that are applied at the container level deal with how items are placed in the container as well as their spacing, alignment, and how they’re justified. Here’s a list of the main flexbox properties you can apply at the container level:
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Next, I will explain how each property works in detail.
flex-direction
The flex-direction property defines the main axis. In other words, it specifies how flex items are placed in the flex container, and it has four possible values:
- row (default)
- row-reverse
- column
- column-reverse
If you set flex-direction to row or row-reverse, the main axis will run along the horizontal axis (i.e., from left to right). But if you set it to column or column-reverse, the main axis will run vertically (i.e., from top to bottom).
As I mentioned earlier, the cross axis is perpendicular to the main axis. Therefore, if you set flex-direction to row or row-reverse, the cross axis goes from the top of the page to the bottom. On the other hand, if you set it to column or column-reverse, the cross axis will run along the rows.
flex-wrap
Using the flex-wrap property, you can control whether the flex container has one line or multiple. The order of stacking the lines on top of each other is determined by the direction of the cross axis. The possible values are as follows:
- nowrap (default): The flex items are laid out in a single line, and the flex container can overflow.
- wrap: if there isn’t enough room for the flex items them on the first flex line, they will wrap onto additional flex lines.
- wrap-reverse: Behaves in the same way as wrap but cross-start and cross-end are swapped.
justify-content
This property can be used to align flex items along the main axis of the current line of the flex container. This takes place once all the flexible lengths and auto margins have been resolved. This property helps distribute extra free space when either all the flex items on a line are inflexible or have reached their maximum possible size.
- flex-start (default): Packs the flex items toward the beginning of the line.
- flex-end: Packs the flex items toward the end of the line.
- center: Packs the flex items toward the center of the line.
- space-between: Evenly distributes flex items on the line.
- space-around: Evenly distributes flex items on the line, with half-size spaces on either end.
align-items
The align-items property is different from the justify-content property in that it aligns flex items on the cross-axis instead of aligning them on the main axis. Here are the values you can assign to this property.
- flex-start: Packs the flex items toward the cross-start of the line.
- flex-end: Packs the flex items toward the cross-end of the line.
- center: Packs the flex items toward the center of the line
- baseline: Aligns the flex items in a way that their baselines align.
- stretch (default): Stretches the flex items from the cross-start to the cross-end; however, it conforms to the constraints of min-height/min-width/max-height/max-width.
align-content
With this property, a flex container’s lines are aligned within the flex container if there is extra space in the cross-axis. If the flex container is composed of a single line, this property has no effect. Here are the values you can assign to this property.
- flex-start: Packs the lines toward the cross-start of the flex container.
- flex-end: Packs the lines toward the cross-end of the flex container.
- center: Packs the lines toward the center of the flex container.
- space-between: Evenly distributes the lines are in the flex container
- space-around: Evenly distributes the lines in the flex container, with half-size spaces on either end.
- stretch (default): Stretches the lines to fill the remaining space.
Item-level properties
There are also some properties to control the individual items inside a container. You can target and manipulate the size of each item using these three properties:
flex-basis
The flex-basis property determines the initial main size of a flex item. It takes the same values as the width property. So, in addition to the default value of auto, you can use absolute values and percentages, but negative values are invalid. Flex-basis overrules any specified CSS width value, but if you set flex-basis to 0, it’ll expand to accommodate whatever content/padding is in it.
flex-grow
Using the flex-grow property, you can set the amount of the reaming space in the flex container that can be assigned to an item. The property is also called the flex-grow factor. The property defaults to 0. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.
flex-shrink
You can use the flex-shrink property to set the shrink factor of a flex item. This property helps when the size of all flex items is larger than the flex container because it makes them shrink to fit according to flex-shrink.
The property defaults to 1. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.
flexbox shorthand
More often than not, instead of seeing the flex-grow, flex-shrink, and flex-basis properties used individually, you’ll see them combined into the flex shorthand. This shorthand lets you set the three values at the same time in this order: flex-grow, flex-shrink, flex-basis.
So instead of writing:
.example {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
You write:
.example {
flex: 1 1 auto;
}
Summary
Flexbox is a powerful CSS3 module that allows you to format HTML easily. To use the module, you need to designate a container div and set its display property to flex.
These are the five main properties you can set at the container level, which you can use as a Flexbox cheat sheet:
- flex-direction determines the items are placed next to each other in the container and defines the main-axis.
- flex-wrap sets whether wrap to the next row
- justify-content: aligns the items along the main-axis
- align-item: aligns the items along the cross-axis
- align-content: only applies if there are multiple lines
You can also use flex-grow, flex-shrink, and flex-basis to manipulate the items inside the container.
There are many great CSS Flexbox tutorials that you can take to learn more about building responsive layouts in CSS. If you want to learn CSS Grid as well, I highly recommend ready my CSS Grid tutorial for beginner. Please share your thought about using CSS Grid vs FlexBox and which one do you prefer to use.
Be First to Comment