What is Flexbox?
CSS Flexbox allows items to be laid out in a single dimension. With Flexbox's properties, we can control the dimensions, spaces, and positions of items. Flexbox is used for designing the one-dimensional layout, at a time you can either design your layout in columns or rows. Everything in flexbox depends on these two terms main axis and cross-axis they are perpendicular to each other. The main axis is determined by the flex-direction property.
Flexbox works with the concept of containers and items, every element which is to be layout needs to be inside a container, this container is known as a flex container and the element is known as a flex-items. Let’s try to understand this with an example.
This is the HTML file we are going to use for this article, in this HTML document we have a div element with the class as container and it has five div child elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Positioning</title>
</head>
<style>
.container {
width: 90vw;
height: 80vh;
border: 2px solid #242b2e;
padding: 10px;
/* changes below this*/
}
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
margin: 10px;
font-size: 40px;
text-align: center;
color: #ffffff;
}
</style>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</div>
</body>
</html>
As you can see all five boxes are stacked one after another, let’s add display: flex
to the container.
.container {
width: 600px;
height: 500px;
border: 2px solid #242b2e;
padding: 10px;
/* changes below this*/
display: flex;
}
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
margin: 10px;
font-size: 40px;
text-align: center;
color: #ffffff;
}
Adding display: flex
to the container element will define it as a flex container and all the flex items will be layout according to their main axis depending on the flex-direction
by default the flex: direction
is set to row so horizontal is our main axis, so the item will layout in a row.
Now let’s change the flex-direction to a column and see the changes.
.container {
width: 600px;
height: 500px;
border: 2px solid #242b2e;
padding: 10px;
/* changes below this*/
display: flex;
flex-direction: column;
}
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
margin: 10px;
font-size: 40px;
text-align: center;
color: #ffffff;
}
As you can see when we change the flex-direction to the column, the column becomes the main axis and the horizontal becomes the cross axis.
Flex direction
The flex-direction
property is used to establish the main axis. flex-direction
takes 4 values row
column
row-reverse
and column-reverse.
On webpages, the default value of `flex-direction is set to row.
flex-direction: column
This property set’s the column as the main axis, so items are arranged from top to bottom.
flex-direction:row-reverse
This property reverses the items from left to right to right to left and moves the element toward the end of the container.
flex-direction: column-reverse
This property reverses the items from top to bottom to bottom to top and moves the item toward the end of the container.
flex-wrap
Flexbox is a one-dimensional layout system, so by default, all the items will try to fit in one line, but we can allow items to wrap and move to the next line, just like word wrap in vs code. We can pass three values to flex-wrap
nowrap
wrap
wrap-reverse
By default, flex-wrap is set to no-wrap flex-wrap: nowrap
.
flex-wrap: wrap
When we change the size of the container items move to the next line.
flex-wrap:wrap-reverse
Applying wrap-reverse
will wrap items to the next line but from bottom to top.
justify-content
justify-content
is used to align the items along the main axis. This is generally used to distribute the space between the items. justify-content
takes many values but we are going to discuss the values that are used most.
justify-content: center
the
justify-content
center is used to move the items to the center of the main axis.
justify-content: flex-start
This is used to move the items to the start of the main axis. This is also the default value.
justify-content: flex-end
This property is used to move the items to the end of the main axis.
justify-content:space-between
This property moves the first item to the start of the main axis and the last item to the last of the main axis and leftover space is event distributed between the items.
justify-content: space-around
This property is used to evenly distributes the items, with equal space around them.
justify-content: space-evenly
This property is used to distribute equal space around the items.
align-items
align-items
is used to control the alignment of items along the cross-axis. align-items
takes the following values flex-start
flex-end
center
stretch
baseline.
align-items: center
This property is used to align items to the center along the cross-axis.
align-items: flex-start
This property is used to align and move the items to the start of the container along the cross-axis.
align-items: flex-end
This property is used to align and move the items to the end of the container along the cross-axis.
align-items:stretch
This property is used to stretch and fill the items along the cross-axis.
align-content
align-content
is very similar to justify-content
property. This is also used to distribute the space between the items but along the cross-axis. align-content
takes the following values. flex-start
flex-end
center
stretch
space-between
and space-around
Now let’s discuss some properties which can be applied only to the items themselves.
order
order property is used to control the order of the items. By default, all the flex items have an order value of 0. The order of items is controlled by the order property.
.container {
width: 50%;
height: 500px;
border: 2px solid #242b2e;
padding: 10px;
/* changes below this*/
display: flex;
}
.box {
background-color: #242b2e;
height: 100px;
width: 100px;
margin: 10px;
font-size: 40px;
text-align: center;
color: #ffffff;
}
.box-1 {
order: 3;
}
.box-4 {
order: -1;
}
flex-grow
It specifies the amount by which an item will grow relative to the rest of the flexible items in the same container.
Conclusion
The article only discusses the most commonly used flexbox properties. If you want to learn more about flexbox, CSS Tricks has a great article on it. That's all for this article, let me know what you think in the comments.