A Beginner's Guide To CSS Flexbox Layouts
I am a technical writer and software engineer
This tutorial covers Flexbox basics. You'll learn how to align flex items vertically and horizontally. In the end, you'll be able to create flexible items.
What is Flexbox?
Flexbox is a floats alternative. It gives you control of the direction, alignment, size, and order of boxes. Flexbox uses two boxes: flex container and flex items.
The flex container contains a group of flex items. Flex items can be controlled individually, and can have flex items in them.
Creating a flex container
To use Flexbox on your website, you need to turn an element into a Flex container. You do this by giving the display property a value of flex.
In our example, we will give the container with class="items" a display="flex"
<!-- HTML boilerplate-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="items">
<div class="item one">item-one</div>
<div class="item two">item-two</div>
<div class="item three">item-three</div>
<div class="item four">item-four</div>
</div>
</body>
</html>
CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0 auto;
height: 100vh;
}
/* making the container a flexbox container */
.items{
display: flex;
border: 1px solid black;
width: 50%;
height: 400px;
}
output:
Now the browser will render everything inside the container with Flexbox.
Aligning flex items horizontally
We can align our flex items horizontally using the justify-content property. The justify-content property takes several values. They include the following:
- Flex-start: Items placed at the start of the container.
.items{
display: flex;
justify-content: flex-start;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Center: Items placed at the center of the container.
.items{
display: flex;
justify-content: center;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Flex-end: Items placed at the end of the container.
.items{
display: flex;
justify-content: flex-end;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Space-around: With
space-around, the flex container spreads the items across its width. It also adds extra space on the right and left sides.
.items{
display: flex;
justify-content: space-around;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Space-between: With
space-between, the container adds space between the items.
.items{
display: flex;
justify-content: space-between;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
Nesting flex items
The flex container will only align the immediate child items. As such, it does not interfere with the item(s) within the child items.
If we want the items with classes item-two, item-three, and item-four to be on the right end of the container, we can nest them in one <div>.
Let's give the <div> element a class="right-end"
<div class="items">
<div class="item one">item-one</div>
<div class="right-end">
<div class="item two">item-two</div>
<div class="item three">item-three</div>
<div class="item four">item-four</div>
</div>
</div>
Then give the container a justify-content of space-between.
.items{
display: flex;
justify-content: space-between;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
Now our flex container has two flex items. But, the second item with class="right-end" looks ugly. Let's use Flexbox to style it. We'll give it a display="flex" and justify-content="space-between" to override the default block layout.
output:
Aligning vertically
To align flex items vertically, we use the align-items property. It takes several values, which include the following:
- Flex-start: Items are aligned to the start of the container.
.items{
display: flex;
align-items: flex-start;
border: 1px solid black;
width: 50%;
height: 400px;
}
output:
- Flex-end: Items are aligned to the end of the container.
.items{
display: flex;
align-items: flex-end;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Center: Items are centered along the container.
.items{
display: flex;
align-items: center;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Stretch: With
stretch, items extend the full height of the parent container.
.items{
display: flex;
align-items: stretch;
border: 1px solid black;
width: 50%;
height: 400px;
}
Output:
- Baseline: Items are aligned based on their baselines (text's bottom line).
Flex wrap
Flex wrap comes in handy when you have many items to fit in the flex container. By default, if the items don’t fit, they will flow off the edge of the container.
Luckily, we can use the flex-wrap property to force the extra items down the next row. We should use the wrap value. That is, flex-wrap: wrap
.items{
display: flex;
justify-content: flex-start;
border: 1px solid black;
width: 800px;
height: 400px;
flex-wrap: wrap;
}
Output:
Now the items fit in the flex container.
If you don’t want to wrap the items, especially when you want users to horizontally scroll through items, you can use no-wrap value.
Flex direction
Flex direction specifies how the container will render its items. This can be vertically or horizontally. By default, display: flex renders the items horizontally.
The two main direction options are row and column
- Flex-direction: row
.items{
display: flex;
justify-content: flex-start;
flex-direction: row;
border: 1px solid black;
width: 800px;
height: 400px;
}
Output:
- Flex-direction: column
.items{
display: flex;
justify-content: flex-start;
flex-direction: column;
border: 1px solid black;
width: 800px;
height: 400px;
}
Output:
Using flex-direction to change the order of items
With flex-direction, we can change the order in which the items are rendered. For example, we can reverse the existing row by using flex-direction: row-reverse.
.items{
display: flex;
justify-content: flex-start;
flex-direction: row-reverse;
border: 1px solid black;
width: 800px;
height: 400px;
}
Output:
Now, the first item is on the right and vice versa.
We can also reverse the default column order by using flex-direction: column-reverse.
.items{
display: flex;
justify-content: flex-start;
flex-direction: column-reverse;
border: 1px solid black;
width: 800px;
height: 400px;
}
Output:
Now, the item which was at the bottom is at the top and vice versa.
Changing the order of individual items
You can change the position of individual items using the order property. The default value is 0. Increasing this value will move the item to the right while decreasing it will move the item to the left.
Going back to our example, we will give item class="one" an order value of 1. Let's see what happens.
.one{
width: 200px;
background-color: #FD841F;
order: 1
}
Well, the flex item is pushed to the end of the row since 1 is greater than 0. Unlike column-reverse or row-reverse, order property works across different rows and columns.
Aligning individual flex items
We can also change the vertical alignment of each flex item. Here, we use the align-self property which takes the following values:
- Center
.one{
width: 200px;
background-color: #FD841F;
align-self: center;
}
Output:
- Flex-start
.one{
width: 200px;
background-color: #FD841F;
align-self: flex-start;
}
Output:
- Flex-end
.one{
width: 200px;
background-color: #FD841F;
align-self: flex-end;
}
- Stretch
.one{
width: 200px;
background-color: #FD841F;
align-self: stretch;
}
Output:
Creating flexible items
Ideally, flexbox should allow you to create flexible items that stretch or shrink with the width of the container.
We use the flex property to create flexible items, allowing you to specify their width. By default, all items have a flex value of 1. This means, if you give an item a flex value of 2, it will be 2x larger than the items with the default value.
Let's give the flex item with class="two" a flex=2
.two{
height: 100px;
background-color: #E14D2A;
flex: 2;
}
Output:
