CSS FLEXBOX - A STARTER KIT
Tags: html, css, webdev, frontend
Published: 2020-08-30 07:56:06

Hey Learner, do you want to learn *Frontend Development*???🤩🤩
YYYYYYYEEEEEEESSSSSSSSS???!!!!💯 
Then **CSS** is one of the tools in which developers like you spend a lot of time to learn and implement 🤕🤒

So, to get started with Flexbox, first thing you need to know is **What is a Flexbox?**

Well, *CSS Flexbox* is a **one-dimensional model or structure** that not only helps you to arrange your items or elements along the *cross-axis (top-bottom)* and *main-axis (left-right)* but also provides you a lot of flexibility to control the **spacing** between the elements😲😲
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/e9yfhao76zm4wmufgcx1.png)
Hope, this image gives you a basic idea about the different components of a Flexbox. 
We have a parent **Flex Container**, within which all our children **Flex-items** are arranged.

####The properties of a CSS Flexbox Container are:
* display
* flex-direction
* flex-flow
* flex-wrap
* justify-content
* align-items
* align-content

###Display
Display Property is used to create a *Flex Container*. The value of the *display* property is either set to **flex** or **inline-flex**. The following code snippet will create a *Flex-container* with six *Flex-items* embedded within it.
####index.html
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <<link rel="stylesheet" href="style.css">
        <title>CSS Flexbox</title>
</head>

<body>
    <div class="container">
        <div class="flex-items fruit-1">Apple</div>
        <div class="flex-items fruit-2">Orange</div>
        <div class="flex-items fruit-3">Banana</div>
        <div class="flex-items fruit-4">Strawberry</div>
        <div class="flex-items fruit-5">Cherry</div>
        <div class="flex-items fruit-6">Guava</div>
    </div>

</body>

</html>
```
#### style.css

```
.container {
    border: 5px solid black;
    display: flex;
}

.flex-items {
    color: #800000;
    font-size: 2rem;
    text-align: center;
}

.fruit-1 {
    background-color: #ff1a1a;
}

.fruit-2 {
    background-color: #ff9933;
}

.fruit-3 {
    background-color: #ffff00;
}

.fruit-4 {
    background-color: #ffb3b3;
}

.fruit-5 {
    background-color: #e60000;
}

.fruit-6 {
    background-color: #66ff66;
}
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/l3zdegqkbwya0vscfxpa.png)

Note that, when we set the *display* value to **flex**, the items are *left-aligned* by default, as a result of which, we have some white spaces at the end.
<br>Let's set the *display* value to **inline-flex** and see what happens !!!🤔
```
.container {
    border: 5px solid black;
    display: inline-flex;
}
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/ciflj8dxmb1i01n0qimm.png)

We can get rid of the extra spaces. The container only takes up that amount of space required to accommodate its children (flex-items)🤘🎉

###Flex-direction
Flex-direction property controls how the *Flex-items* will be placed inside the *Flex-container*. 

**The possible values of *flex-direction* property are:**

* row: Arranges the items from left-right (default case)

* row-reverse: Arranges the items from right-left

* column: Arranges the items from top-bottom

* column-reverse: Arranges the items from bottom-top

Lets apply each of these properties and see them in action!!
####row
```
.container {
    border: 5px solid black;
    display: flex;
    flex-direction: row;
}
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/3d9f7aiuaop3ak570r1i.png)

####row-reverse
```
.container {
    border: 5px solid black;
    display: flex;
    flex-direction: row-reverse;
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/uz5dhuljhmlep7dvccsk.png)

####column
```
.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column;
}
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/6rrxnm2cfekltqth8otu.png)

####column-reverse
```
.container {
    border: 5px solid black;
    display: flex;
    flex-direction: column-reverse;
}
```
![Flexbox](https://dev-to-uploads.s3.amazonaws.com/i/yt07qzm62k9ze17a97w9.png)

Hope you got a basic idea about how to get started with Flexbox👩‍💻
Keep Learning!!🤘✌️