Here are Flex-Box Container Properties
Tags: css, html, flex, beginners
Published: 2022-08-08 12:42:51

Under the Flex Container Properties it is categorized into six:-

1. Flex Direction 
2. Flex Wrap 
3. Flex Flow 
4. Justify- Content 
5. Align Item 
6. Align Content 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1luwhxjpd58iydyvfgso.png)

  

**1. Flex Direction**

Apply the flex properties to the parent element that has the child 

The direction could be either _raw or column._

<u>HTML DOCUMENT</u> 

```
<!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>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
       <div id="one">item One</div>
       <div id="two">item two</div>
       <div id="three">item Three</div>
       <div id="four">item Four</div>
    </div> 
</body>
</html>
```
<u>CSS DOCUMENT COLUMN DIRECTION</u>

```
/*parent container */
.container {
    display: flex;
    flex-direction:column;
    border: 2px solid black;
    padding: 80px ;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 10vw;
    border: 2px solid black;
    text-align: center;
}
```
<u>CSS DOUMENT RAW DIRECTION </u>

```
/*parent container */
.container {
    display: flex;
    flex-direction: row;
    border: 2px solid black;
    padding: 80px 80px 80px 80px;
    gap: 20px;
    /*child elements*/
}
#one , #two , #three , #four {
    height: 15vh;
    width: 8vw;
    border: 2px solid black;
    text-align: center;
}
```

**2. Flex Wrap**

This feature specifies the items to wrap on resizing the into of the browser or the webpage. It is normally used to adjust the child elements and it is normally applied to the parent element.

The Flex Wrap holds three values _flex no-wrap, Flex Wrap, and  Wrap –Reverse_

<u>HTML DOCUMENT</u>

```
<!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>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Angela </div>
        <div>Tom</div>
        <div>Mary</div>
        <div> John</div>
    </div>
    
</body>
</html>

```
<u>CSS DOCUMENT FLEX WRAP :NO-WRAP</u>

This is a default value of the flex box which specifies the parent element that its child elements should not be wrapped or adjusted.

```
/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: nowrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    Gap: 20px;
}
/*Child Elements*/
.container> div {
    Padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
```
<u>CSS DOCUMENT FLEX WRAP :WRAP</u> 

With this one it specifies that all the child elements in the parent should be wrapped or adjusted accordingly.

```
/* Parent Elements*/
.container {
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}

```
<u>CSS FLEXWRAP REVERSE : WRAP REVERSE</u> 

```
/* Parent Elemnts*/
.container {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: rgb(2, 192, 182);
    padding: 80px 80px 80px 80px;
    gap: 20px;
}
/*Child Elements*/
.container> div {
    padding: 2vh 2vw 2vh 2vw;
    background-color: rgb(11, 84,186);
    color: white;
}
```
**3.Flex-Flow**
 
Among the Flex container properties, the flex- flow for both flex direction and flex wrap. However, if the elements are not flexible items then the flex flow property will not be in effect.

<u>CSS DOCUMENT FLEX FLOW</u> 

```
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;
```
**4.Flex Justify Content** 

This property is used to align items along the main axis. There are two types of Flex-Justify Content. 

•	Raw Justify Content ( Aligns items along the horizontal axis )

•	Column Justify Content ( Aligns items along the vertical axis ) 

       

They are then further divided into five values:-

Justify Content : Flex- Start 
Justify Content : Centre 
Justify Content : Flex-End 
Justify Content : Flex-Around 
Justify Content : Space Between 


<u>HTML DOCUMENT</u> 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
        <div>Mango</div>
    </div>
</body>
</html>
```
<u>CSS DOCUMENT Justify – Content : Flex Start</u> 

It has a responsibility of aligning items at the beginning of the parent container. It is also known as the default value.

```
/*Parent Element */
.container {
    display: flex;
    justify-content: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
```
   
<u>CSS DOCUMENT Justify Content: Centre</u>

It aligns all the flex items at the Centre of the parent container.

```
/*Parent Element */
.container {
    display: flex;
    justify-content: center;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
```

<u>CSS DOCUMENT Justify Content : Flex –End </u>

With this one it aligns all the items at the end of the parent container. 

```
/*Parent Element */
.container {
    display: flex;
    justify-content: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}

```
<u>CSS DOCUMENT Justify Content :Space – Around</u> 

In this kind space is created between and after the lines .

```
/*Parent Element */
.container {
    display: flex;
    justify-content: space-around;
    background-color: rgb(2, 192, 182);
    padding: 80px 40px 80px 40px;
    gap: 20px;
    width: 60vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
```

<u>CSS DOCUMENT Flex content :Space –Between </u>

Here there is space in between the elements.
Since we have dealt the alignment of items in the main axis, let us look at the positioning of the cross axis. This involves the aligning of items and the alignment of content. 

**5.Align Items**

When aligning items, there are two things to consider. One, if the container is set to row then the child elements will be in a vertical position. While if the container is set to column, then the child elements while be in a horizontal position.
 
In aligning items in flex box there are five values that you need to consider.
 
Align Items :Flex-Start 
Align Items :Flex-End 
Align Items : Centre 
Align Items : Base-Line 
Align Items : Stretch 

N/B: In all the below examples I will use the row direction which is the default 

<u>HTML DOCUMENT</u> 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Flex Justify Content </title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div>Tomato </div>
        <div>Potatoes </div>
        <div>Onions</div>
    </div>
</body>
</html>
```

<u>CSS DOCUMENT Align Items : Flex – Start </u>

Here the items are arranged at the top of the container.

```
/*Parent Element */
.container {
    display: flex;
    align-items: flex-start;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}

```
<u>CSS DOCUMENT Align Items : Flex-End </u>

This aligns elements at the bottom of the parent container.

```
/*Parent Element */
.container {
    display: flex;
    align-items: flex-end;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
```

<u>CSS DOCUMENT Align Items : Centre</u> 

These items are arranged at the center of the parent container 

```
/*Parent Element */
.container {
    display: flex;
    align-items: center;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}

```

<u>CSS DOCUMENT Align Items : Base Line</u> 

Here items are arranged in the base axis. This Is irrespective of their item size 

```
/*Parent Element */
.container {
    display: flex;
    align-items: baseline;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}

```

<u>CSS DOCUMENT Align Items :Stretch </u>

It stretches out the container to items in order to fill the container.

```
/*Parent Element */
.container {
    display: flex;
    align-items: stretch;
    background-color: rgb(2, 192, 182);
    padding: 40px 40px 40px 40px;
    gap: 20px;
    width: 70vw;
    height: 70vh;
}
.container > div {
    padding: 3vh 1vw 3vh 1vw;
   background-color: rgb(11, 84, 186);
   color: white;
}
```
 
**6.Align Content**

Aligning Content is used to control the spaces in between the rows. It is also known as packing flex lines and takes place in the cross axis.

When the direction is row, align content is used to align flex lines along the vertical axis . 

When the direction is column, align content is used to align flex lines along the horizontal axis .

It takes out the following values:-
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch

<u>HTML DOCUMENT </u>

```
<!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>Flex Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div> Flex Item 1</div>
    <div> Flex Item 2</div>
    <div> Flex Item 3</div>
    <div> Flex Item 4</div>

  </div> 
</body>
</html>

```
N/B All my examples are on row as a direction of default.

<u>CSS DOCUMENT Align Content : Flex-Start</u>

Aligns the flex lines on top of the parent container 

```
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
```

 <u>CSS DOCUMENT Align Content :Flex –End </u>

This one aligns the flex lines at the bottom of the container. 

```
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
```

<u>CSS DOCUMENT Align Content :Flex –Centre</u> 
Aligns  the flex lines at the middle of the parent container 

```
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }

```
<u>CSS DOCUMENT Align Content :Space –Between </u>

The space between the flex lines 
 

```
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
```

<u>CSS DOCUMENT Align Content : Space- Around </u>

Flex Lines with spaces around them 

.

```
container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }



```
<u>CSS DOCUMENT Align Content :Stretch</u> 
The flex lines are stretched to fill out the container.

```
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
   background-color: rgb(2, 192, 182);
   padding: 40px;
   gap: 20px; ;
   height:75vh ;
   width:30vw ;
}
 .container>div {
    padding:3vh 1vw 3vh 1vw ;
    background-color:rgb(11, 84, 186) ;
    color: white;
 }
```