# Properties of Flex Container

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>
<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>
<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{
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: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

.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-items:stretch

This is the default value for align-items

#### align-items:space-evenly

These were all the properties for the flex container.