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>
  <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
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.

display : flex
display : flex

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

display: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;
flex-direction:row;

flex-direction:row-reverse;

flex-direction:row-reverse;
flex-direction:row-reverse;

flex-direction:column;

flex-direction:column;
flex-direction:column;

flex-direction:column-reverse;

flex-direction:column-reverse;
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.

items are inline
items are inline
wrapping items
wrapping items
wrapping items
wrapping items

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

items are inline
items are inline
wrap-reverse
wrap-reverse
wrap-reverse
wrap-reverse

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-start
justify-content: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:flex-end
justify-content:flex-end

justify-content:center

This will make the items to be placed at the center of the main axis

justify-content : center;
justify-content : center;

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-between;
justify-content:space-between;

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.

justify-content:space-around
justify-content:space-around

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

 justify-content:space-evenly;
justify-content:space-evenly;

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

align-items:flex-start

It align the item at the start and does not cover the whole container.

align-items:flex-start
align-items:flex-start

align-items:flex-end

It align the item at the end and does not cover the whole container.

align-items:flex-end
align-items:flex-end

align-items:center

It aligns the items in the center

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

all the texts are in a line using align-items:baseline
all the texts are in a line using align-items:baseline

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

align-items:flex-start
align-items:flex-start

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-start;
align-content:flex-start;

align-content:flex-end

align-items:flex-end
align-items:flex-end

align-items:stretch

This is the default value for align-items

align-items:stretch
align-items:stretch

align-items:space-around

align-items:space-around
align-items:space-around

align-items:space-between

align-items:space-between

align-items:space-evenly

align-items:space-evenly

These were all the properties for the flex container.

One Reply to “Properties of Flex Container”

Leave a Reply

Your email address will not be published. Required fields are marked *