# Flexbox

# Introduction

Flexbox is a one-dimensional layout method to arrange items in rows or columns.  Floats and positions features used for creating CSS layouts earlier, using these kinds of features were also limiting and frustrating.
It was difficult to vertically center a block of content inside its parent and make all the children of the container take an equal amount of available width and height using floats and positions. Hence flexbox makes a lot of layout tasks in a much easier way.

## Example without usage of flex:
In the example shown above, the blocks are placed in row format but we want the blocks to allocate in column format.

![Screenshot (1606).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669272446958/VH5DLTNYA.png align="left")

```
.html{
            background-color: green;
        }
        .css{
            background-color: red;
        }
        .js{
            background-color: orange;
        }```

```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>```
## Example with usage of flex:
The blocks to allocate in column format, we use the `display: flex` property on the parent element. Here display property is used on the container class.

![Screenshot (1607).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669272699697/K5Xh19CMn.png align="left")

```
.html{
            background-color: green;
        }
        .css{
            background-color: red;
        }
        .js{
            background-color: orange;
        }
        .container{
            display:flex;
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

# Basic terminology
Elements are laid out along two axes.
![flex_terms.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669273811754/huwM_R_wC.png align="left")

- The __main axis__ is the default axes that are running in the direction the flex items are laid out in. The start and end of this axis are called the main start and main end.

- The __cross axis__ is the axis running perpendicular to the direction of default axes. The start and end of this axis are called the cross start and cross end.

- The __parent element__ that has __display: flex__ property is called the flex container.

- The items laid out as __flexible boxes__ inside the flex container are called __flex items__.

# Flex-direction

Flexbox provides flex-direction property to arrange the items in a row or column. Flex-direction has values like row, row-reverse, column, and column-reverse.

## Flex-direction:row
Displays the elements in a row.

```
.container{
            display:flex;
            flex-direction: row;
        }```

![Screenshot (1607).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669275453743/2tA_u1h-T.png align="left")

## Flex-direction:row-reverse

Reverse the row elements. In the example, HTML and JS blocks are exchanged.

```
.container{
            display:flex;
            flex-direction: row-reverse;
        }```

![Screenshot (1608).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669275704342/0YWXDUafq.png align="left")

## Flex-direction:column
The elements are arranged in a column.

```
.container{
            display:flex;
            flex-direction: column;
        }```

![Screenshot (1606).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669275834284/GVLSLarsr.png align="left")

## Flex-direction:column-reverse
 The column elements are reversed.

```
.container{
            display:flex;
            flex-direction: column-reverse;
        }```



![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669275998811/CZ_71mmNj.png align="left")

# flex
We can control the child elements available space along the main axis by using the __flex__ property. 
```
.css{
            flex:2;
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div> ```

![Screenshot (1611).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669281106512/Xjmr75uE3.png align="left")

# gap


The gap is used to give space between the items.

```
.container{
            display:flex;
            gap:10px;
            
            
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```


![Screenshot (1613).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669283546384/KExpZFYVa.png align="left")

# Justify-content
Justify-content property aligns the container's items on the main axis.
__Flex-start, flex-end, space-between ,space-around, and space-evenly__ are the few values for the justify-content.

## flex-start
Items align from starting of the container.

```
.container{
            display:flex;
            justify-content: flex-start;
            border:5px solid black;
            
            
        }```

```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

![Screenshot (1615).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286005533/IBqyP_4ze.png align="left")

## flex-end
Items align from ending of the container.
```
.container{
            display:flex;
            justify-content: flex-end;
            border:5px solid black;
            
            
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

![Screenshot (1617).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286107123/hWr4YQaiu.png align="left")

## space-between
Items will have space between.

```
.container{
            display:flex;
            justify-content: space-between;
            border:5px solid black;
            
            
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

![Screenshot (1618).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286426688/AyyMfbsbe.png align="left")

## space-around

Items will have space before, between, and after them.
```
 .container{
            display:flex;
            justify-content: space-around;
            border:5px solid black;
            
            
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```
![Screenshot (1619).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286620156/Mod2PZPo9.png align="left")

## space-evenly
Items will have equal space around them

```
 .container{
            display:flex;
            justify-content: space-evenly;
            border:5px solid black;
            
            
        }```

```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

![Screenshot (1620).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287005745/rwmb1j8oU.png align="left")

## center
Items are positioned in the center of the container.

```
.container{
            display:flex;
            justify-content: center;
            border:5px solid black;
            
            
        }```
```
<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>
            
        </div>
        
    </div>```

![Screenshot (1622).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287221217/IR1fu90ag.png align="left")

# align-items
 align-item property aligns the container's items on the cross axis. Center, flex-start and flex-end are the few values for the align-items.

## flex-start
```
.container{
            display:flex;
            
            border:5px solid black;
            height:500vh;
            align-items: flex-start;
            
            
        }```

![Screenshot (1623).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287922116/H2gMet5-2.png align="left")
## flex-end
 ```
.container{
            display:flex;
            
            border:5px solid black;
            height:500vh;
            align-items: flex-end;
            
            
        }```

![Screenshot (1625).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287989897/_XD8OeB6_.png align="left")

## center
```
.container{
            display:flex;
            
            border:5px solid black;
            height:500vh;
            align-items: Center;
            
            
        }```


![Screenshot (1626).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669288033737/zf00RTHS4.png align="left")