Flexbox for Beginner
Tags: flexbox, css, layout
Published: 2021-01-14 07:53:39

---
title: Flexbox for Beginner
published: true
description: Flexbox for Beginner. For layout design. 
tags: flexbox, css, layout
//cover_image: https://direct_url_to_image.jpg
---

Hey there! In this article going to learn how to create your layout very fast using **Flexbox**. Already added little bit style.  

**index.html**

```
<html>
    <head>
        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <nav class="container">
            <div>Home</div>
            <div>Search</div>
            <div>Logout</div>
        </nav>
    </body>
</html>
```

**basic.css**

```
.container > div {
  padding: 10px;
  text-align: center;
  font-size: 2em;
  color: #ffeead;
}

html, body {
  background-color: #ffeead;
  margin: 10px;
}

.container > div:nth-child(1) {
  background-color: #96ceb4;	
}

.container > div:nth-child(2) {
  background-color: #ff6f69;
}

.container > div:nth-child(3) {
  background-color: #88d8b0;
}
```

**index.css**

```
.container {
  border: 5px solid #ffcc5c;
}
```
**Default view**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lnh7z0yn3gdmk43d05hl.png)


So turn into **Flexbox** layout. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
 }
```
**Output**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/adgn5j05prsdn5p6v5gv.PNG)

So automatically line of the element horizontally supposed to vertically. Flexbox default going for left to right. Flexbox default block level element. That was a very quick introduction.  

## 1. Main axis and cross axis flexbox

This is the core concept of flexbox. A flexbox always has a direction. By default this direction horizontal. Is there main axis goes to left to right. We have **cross axis** from **top to bottom**

Now want to flip the direction of the flexbox. Let's do that.  

**index.css**

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: row;
}
```

`flex-direction: row;` nothing to happen. If we change to `column`.

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
}
```

Now we can see. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y32ys2v8co9oafu3ga0k.PNG)

Now main axis goes top to bottom. 

## 2. Justify Content - flexbox

> flex-start, flex-end, center space-around, space-between, space-evenly

**index.css**

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
/*   flex-direction: column; */
  justify-content: flex-start;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zmkvagnj0bkdw09wtmgj.PNG)

Now change to `justify-content: flex-end;` 
```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
/*   flex-direction: column; */
  justify-content: flex-end;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gt4wxembmyk6o3yg2fct.PNG)

Now change to `justify-content: center;` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/64wc5ummv9gzix6285xg.PNG)

Now change to `justify-content: space-around;` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dbwogjf5671db7ajm5ju.PNG)

equal amount of space left hand side and right hand side. 

Now change to `justify-content: space-between;` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9e9kauw05guce6zdj4na.PNG)

Now change to `justify-content: space-evenly;` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mqk0fk4ivhp6ya9b9tpe.PNG)

## 3. Positioning items - Flexbox

Going to explain position of single item. Now **Logout** menu item want to right side. That forces item target itself. Given single class for menu item home, search and logout.  

**index.css**

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
.logout {
  margin-left: auto;
}
```
Now let's see. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/se49xtotlmu2731f6wr2.PNG)

So this is normally single item change the axis. 

If we want to `search` right side

```
.search{
  margin-left: auto;
}
```
Now let's see

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81vevhayixlk7871jtuc.PNG)

And ask the search before logout in the markup it will push the logout to the right hand side. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  justify-content: flex-end;
}
```

`justify-content: flex-end;` pushing whole items right hand side.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fxy9bvtchwaiakmijgz1.PNG)

Bit more update. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  justify-content: flex-end;
}
.home {
  margin-right: auto;
}
``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ae8er8jnoyysw8ib4vqn.PNG)

And bumm! That pushes the home item from this page here. 

## 4. The Flex Property

The flex property sets the flexible length on flexible items.

> flex-grow, flex-shrink, flex-basis

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
```
Simply target the item. `container` direct children `.container > div { }`. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
.container > div {
  flex: 1;
}
```
Now showing equal amount of space. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ii0us5t0rsii46t7xcj0.PNG)

```
.container > div {
  /*flex: 1;*/
  width: 33.3333%;
  /*flex-grow, flex-shrink, flex-basis */
}
```
> The flex-basis property specifies the initial length of a flexible item.
> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ii0us5t0rsii46t7xcj0.PNG)

Now change this number whenever you want to add new item in the container.  

Now **Search** item twice rest of the item. Bit more change

```
.container > .search {
  flex: 2;
}
```
Now let's see. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f565or70mldl3xy0tbx8.PNG)

```
.container > .home {
  flex: 2;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mhqboqbzmg6k1eaqdml0.PNG)

Also home and logout change the flex property and shrinking smoothly and fixed search width. 

```
.home {
  flex: 1;
}
.logout {
  flex: 1;
}
```
Let's see. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hqo8vpjuvwtexsxbq0ej.PNG)

## 5. Align Items - Flexbox

> Align items property sync with parent

How to control the items along the main axis using just like `justify-content` and `flex`

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9iwp6kqxpt8yzttw1yf1.PNG)

Because of only work `body{height: 100%}`

```
body {
  background-color: #ffeead;
  margin: 10px;
  height: 100%;
}
```
So this nice technique for container responsive. 

By default `align-items: stretch`. So `align-items` is the property control the cross axis. If we change `align-items: flex-start`

**index.css**

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: flex-start;
}
```
**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z7lbcpqxiktphe3yo5sn.PNG)

As we can see pushed on the top the cross axis 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: flex-end;
}
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dpslo4snyeaswj26fnod.PNG)

As we can see pushed on the bottom the cross axis

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
}
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nzo9xw9scrwle61naadq.PNG)

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
```
**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3xl4bevjz7mqawuicwzn.PNG)

Now we can see button centered. No matter how changed the container. So that's nice little trick. 

Now how to align single item at a time. Let's example **Logout** item align.  

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.logout {
  align-self: flex-start;
}
```
**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sja8zb0hgwnp4z5zf4ni.PNG)

That's the item top of the axis. 

Now make this home item appear bottom here. 

```
.home {
  align-self: flex-end;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9w6jt5tw5x3804iiol4o.PNG)


## Flex direction column

Learn about `flex direction column`. Default layout flex direction **row** . Going for left to right. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uv1wwztwqjsfjq5c3ifn.PNG)

Bit more change.

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y5d08m2mnfeex4lec44o.PNG)

Now items are going for top to bottom. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/32w021y3yvdj5kjhku17.PNG)

There we can see container is the enter window. `justify-content` push the all content down of the bottom of the main axis. 

> Noted need `body{height: 100%}`

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1tvzfk212zrdx30c30ho.PNG)

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1iszsffgi6fyilgka49s.PNG)

We can also do center.

Now look at `align-items`. Which control the layout in the cross axis.  

Bit more change.

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  align-items: flex-end;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3njwkgpk0rg56roojmdh.PNG)

That push the end of the **cross axis** for `align-items: flex-end;`

By default `align-items: stretch;`. 

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  align-items: center;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26nbl6t47f09t12l6dbm.PNG)

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  align-items: flex-end;
}
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ihfspfwyjkn6ebbnow1i.PNG)

## Wrapping flexbox

Going to learn wrap item in Flexbox. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xurlpu1l3cxm7hlxfsls.PNG)

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

.container > div {
  width: 300px;
}
```

Flex wrap default value `flex-wrap: nowrap;`

But bit more change like `flex-wrap: wrap;`

```
.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  width: 300px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9eq28fcxaoma08710rev.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pmn0ya7jzflwyd1j18ml.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6jkmpv03tbcwp0cuut0k.PNG)


## Flexbox - flex-grow-shrink-basis

Going to learn flexbox property details. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o61n0sml544gaw3vtwbb.PNG)

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

.home {
  flex: 1;
}

.logout {
  flex: 1;
}
```

**flex** is a shorthand property. 

`flex: 1 1 0;` First 1 is the **grow value** 2nd is the **shrink value** and third is the basis value

```
.home {  
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
```
Same here. 

```
.home {
  flex: 1 1 0;  
}
```

Now two are 200px element. 
```
.home {
  /*
  flex-grow: 1;
  flex-shrink: 1;
  */
  flex-basis: 200px;
  
}

.logout {
    /*
  flex-grow: 1;
  flex-shrink: 1;
  */
  flex-basis: 200px;
}
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jf9q6fukd9zc9yugzxs6.PNG)

```
.home {
  flex-grow: 1;
  flex-basis: 200px;
}
.logout {
  flex-grow: 1;
  flex-basis: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8r3ew4bdunh7nypgr6m.PNG)

Now you can see they actually grow of the container basis. 

```
.home {
  flex-grow: 0;
  flex-basis: 200px;
}

.logout {
  flex-grow: 0;
  flex-basis: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uxhoc1dc8cqxxfr3r4uq.PNG)

If `flex-grow: 1;` then grow normally. 

```
.logout {
  flex-grow: 1;
  flex-basis: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k66rnozqia4ylkrg6khl.PNG)

Home nothing change because of `flex-grow: 0;`

```
.logout {
  flex-grow: 5;
  flex-basis: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nrd2aqw9fmncyi55av97.PNG)

Clearly growing faster than home item. Actually growing five time faster. 

### Shrink

```
.home {
  /*
  flex-shrink: 1;
  */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
  
}

.logout {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vdh9lfy4c1ai59jcl4ns.PNG)

Only shrinking **logout** because of `flex-shrink: 1;`. But home not shrink because of `flex-shrink: 0;`


Home item shrink much quicker than logout item. Actually 5 time faster. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8xbt8hrhbqf5vtg1sws5.PNG)

```
.home {
  flex: 1 1 200px;  
}
```
This is the exact same thing. 

```
.home {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}
```

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

.home {
  flex: 1 1 200px;
}

.logout {
  flex: 10 1 200px;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixnv5xm59uwumbpgzu49.PNG)

Logout grow 10 time faster then home item. 

### Order - flexbox

Going to learn order property in flexbox. We can order any item. Now let's see how it work.  

**index.html**

```
<div class="container">
            <div class="item1">1 Home</div>
            <div class="item2">2 Search</div>
            <div class="item3">3 Logout</div>
        </div>
```

**index.css**

```
.item2 {
  order: 1;
}
```

And what happen here. **Search** jump over the logout. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r06v1025h5vaizf4rt1f.PNG)

> Noted: By default `order: 0`. 

```
.item2 {
  order: -1;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bswqowcxbvpgkdtx29wc.PNG)

```
.item1 {
  order: 2;
}

.item2 {
  order: 0;
}

.item3 {
  order: 0;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/89pljs2bucyxzvucor1u.PNG)

Work on the main axis rest of the item. 

```
.item1 {
  order: 1;
}
.item2 {
  order: 0;
}
.item3 {
  order: -1;
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w7acadwn76dq42odwnq0.PNG)


Thanks for reading.