Properties of Flex Container | Web Development

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.

Output of the above program. Without using flex

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.