In this section, we will know the properties of flex container elements of the flex box. We will apply these properties to align the divs in an example.
Properties for flex container
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Our basic HTML and CSS file will look like as
HTML File
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
<meta name = "viewport"
content = "width = device-width,initial-scale=1.0"/>
<meta http-equiv = "X-UA-Compatible" content ="ie=edge" />
<title>Flex Box</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="flex-item item1">Item1</div>
<div class="flex-item item2">Item2</div>
<div class="flex-item item3">Item3</div>
<div class="flex-item item4">Item4</div>
</div>
</body>
</html>
CSS File
.container{
border:10px solid black;
}
.flex-item{
padding:1em;
font-size:1.5em;
}
.item1{
background-color: #006699;
}
.item2{
background-color: #997d11;
}
.item3{
background-color: #3c9922;
}
.item4{
background-color: #993d33;
}
We have not used any flex in the above code. The output of the above code is shown below.

Flex Display
Now, put the property display:flex in the container class. You will see that all the items are aligned side by side, occupying required space for the text. The container has 100% width.

Now, the flex occupies the whole window. We can control the width according to the items. So instead of displaying flex use inline-flex.

So, display can be either flex or inline-flex
Flex-Direction
Flex-direction works on the main axis. It decides how items will be aligned in the container. Default – Items are placed are from left to right.
Flex-Direction can have one of 4 values
- column
- column-reverse
- row (this is default)
- row-reverse
Prerequisite : Now, you should have display:flex property added to your above CSS file.
flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

So, flex-direction can be row, row-reverse, column or column-reverse.
Flex-Wrap
Flex-wrap is used to control the wrapping of the items in a container. It can take three values.
- wrap
- nowrap
- wrap-reverse
flex-wrap:wrap
Your container should look like
.container{
border:10px solid black;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
Now, as you shrink the browser, you can see that the items wraps as shown in the images.



If you use no-wrap, the items will overflow in the screen and our website will not be responsive.
flex-wrap:wrap-reverse
When you use wrap-reverse, the items are wrapped up instead of down. Hence the items look like
.container{
border:10px solid black;
display:flex;
flex-direction:row;
flex-wrap:wrap-reverse;
}
If the width is sufficient, it won’t make any difference



Flex Flow
Flex flow is a combination for flex-direction and flex-wrap. The default is row nowrap. So instead of flex-direction and flex-wrap, we can use a single property flex-flow as shown below
.container{
border:10px solid black;
display:flex;
/* flex-direction:row; */
/* flex-wrap:wrap; */
flex-flow : row wrap;
}
So, instead of using flex-direction and flex-wrap you can use flex-flow
flex-flow:<flex-direction> <flex-wrap>
Justify-Content
Justify-content defines the alignment along the main axis. It accepts the following values
- flex-start (default)
- flex-end
- center
- space-between
- space-around
- space-evenly
You container class should have the CSS as written below
.container{
border:10px solid black;
display:flex;
justify-content:flex-start;
}
By-default justify-content is set to flex-start.

justify-content:flex-end
This makes items to be placed at the end of the main axis. Change justify-content to flex-end. The output will be

justify-content:center
This will make the items to be placed at the center of the main axis

justify-content:space-between
This makes the even spaces between the items. The items are evenly spread along the main axis. This does not make space at the start of first item and at the end of the last item.

justify-content:space-around
This also makes the even spaces between the items. The items are evenly spread along the main axis same as space-between. But it does make space at the start of first item and at the end of the last item.

The space on the sides are half of the space in between elements.
justify-content:space-evenly
If you want the same space before and after the element, you can use space-evenly. So, the container will look as shown below

In all the above cases, the flex-direction was row. So, if your flex-direction was column, justify content will deal with vertical alignment. You should add height to the container class. You should try along with flex-direction:column.
Align-Items
Align items define the behaviour for how the items will be layed out along the cross axis. Align-items accept the following values
- flex-start
- flex-end
- center
- baseline
- stretch(default)
The container should look like as
.container{
border:10px solid black;
display:flex;
height:300px;
align-items:stretch;
}
align-items:stretch;
It stretches the items to cover the whole container. The container height is specified to 300px. So, it looks as

align-items:flex-start
It align the item at the start and does not cover the whole container.

align-items:flex-end
It align the item at the end and does not cover the whole container.

align-items:center
It aligns the items in the center

align-items:baseline
baseline is line upon which the letters sit. Change the font-size or padding of the items and make the align-items as baseline to see the change.

If we use align-items:flex-start for the same, it will look as shown below.

Align-Content
It aligns the lines of content along the cross axis. For this, multiple rows should be present, otherwise there is no affect. It can have the following values.
- flex-start
- flex-end
- center
- space-around
- space-between
- stretch(default)
Lets add some more items to the container.
align-content:flex-start

align-content:flex-end

align-items:stretch
This is the default value for align-items

align-items:space-around

align-items:space-between

align-items:space-evenly

These were all the properties for the flex container.