Design Layouts - Flexbox
Tags: css, flexbox, beginners, webdev
Published: 2017-10-09 12:18:49

---
title: Design Layouts - Flexbox
published: true
description: The flexbox model gives us an efficient way to align, layout and distribute space among elements within document.
tags: css, flexbox, beginners, webdev
---

The flexbox model gives us an efficient way to align, layout and distribute space among elements within document.


Before diving into flexbox property and its functionality, lets have look at flexbox model. Flexbox model got flex container and flex items.


1.Parent Container - Flex Container and

2.Child Container  - Flex Items


Flex Container - as the name says Container, it contains items called flex items.

Flex items - are the items within the container.


###Getting Started With Flex-Box:


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/sj768m4gbbr772yrasfr.png)



* Main Axis - Horizontally laid, along which flex items are laid out. By default 
  it is horizontally laid. 

* Cross Axis - The axis perpendicular to the main axis is called the cross axis. 
  It extends in the cross dimension.

* Main Start | Main End - The flex items are placed within the container starting 
  on the main-start side and going toward the main-end side.

* Cross Start | Cross End - "Flex lines" are filled with items and placed into 
  the container starting on the cross-start side of the flex container and going 
  toward the cross-end side.



We can easily initiate flex model by simply using the "display" property with  value flex (rendered as a block) || inline-flex (rendered as inline).

So to do that lets write a basic html div with parent class "flex-container" and child div with class "flex-item"


```html
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 4</div> 
  <div class="flex-item">flex item 5</div> 
</div>
```

```css
.flex-container {
    display: flex;
    width:600px;
    background-color: lightgray;
}

.flex-item {
    background-color: #FFA500;
    width: 100px;
    height: 100px;
    margin: 10px;
}
```


We have set display flex and added some basic style to the "flex-item" and the "flex-container".


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/5dgxb0yo584ql7r61zus.png)


You might have noticed that the "flex-item" are aligned by main-axis, Which is not a behaviour of div element. The div element is block element which will be aligned vertically. Suppose If we remove the "display:flex" from the styling you will see the difference.


### Flex Container Properties.


Flex Container has "Flex-direction || Flex-wrap || Flex-flow || Justify-content || Align-items || Align-content" properties.


We can now look at each one of those:


#### Flex Direction


Flex Direction have four different values to it, they are


```css
.flex-container {
    flex-direction: row || column || row-reverse || column-reverse;
}
```


* ROW(default) - row aligns the flex-items along main-axis.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/5dgxb0yo584ql7r61zus.png)

* COLUMN - aligns the flex-items along cross-axis

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/m8o63agcwmxrf6yp4a2t.png)


* ROW REVERSE - flex-items reverse along row.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/q8ih6hiwzzqdarldxhzv.png)


* COLUMN REVERSE - flex-items reverse along column.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/hky8gecdvsaq31p8t83h.png)


#### FLEX WRAP


```css
.flex-container {
  flex-wrap: wrap || nowrap || wrap-reverse;
  }
``` 


Flex wrap is used to wrap or not to wrap all the flex items along main-axis.


Lets increase the flex-items inside container. 


```html
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 4</div> 
  <div class="flex-item">flex item 5</div> 
  <div class="flex-item">flex item 6</div> 
  <div class="flex-item">flex item 7</div> 
  <div class="flex-item">flex item 8</div> 
</div>
```


* NOWRAP (default) - doesnt wrap any flex items into the container along the same 
  main axis. If we had any number of flex items it will not increase the 
  container size and will try to accomdate all along same main axis. 

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/5zft8a984r83k3ys2rlu.png)



* WRAP - wraps the flex items. i.e., when we add many number of flex items it 
  doesnt make any compromise with the item size and will accomdate all the flex 
  items with its original width and height along main axis first. when there is 
  no space left it will move to the next row to accomdate the flex-items.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/ty08mtx6ryt32zslxf3o.png) 



* WRAP REVERSE - wraps the flex items but in reverse. i.e., when we add many 
  number of flex items it doesnt make any compromise with the item size and will 
  accomdate all the flex items in reverse, with its original width and height 
  along main axis first. when there is no space left it will move to the next row 
  to accomdate the flex-items.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/xvstpylpviwm0j5iih42.png)




#### FLEX FLOW


Flex flow is a shorthand property for "flex-direction" and "flex-wrap"


```css
.flex-container {
    flex-flow: row wrap-reverse;
/*
    flex-direction: row;
    flex-wrap: wrap-reverse;
*/
}
``` 

Which will produce the same results has direction "row" and wrap "wrap-reverse".



#### JUSTIFY CONTENT


Justify content will position the flex items. The values of justify content are


```css
.flex-container { justify-content: flex-start || flex-end || center || space-between || space-around
}
```


* FLEX START (default) - By default all the flex items start from the main-start.


* FLEX-END - Positions the flex item from the main-end of the main axis.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/3gdhrmfg4xow1j4g4mq3.png)


 
* CENTER - Positions the flex items in the center.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/u19vomjk5kytlovigvzf.png)



* SPACE AROUND - Positions the flex items with equal space around each item.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/du9bffodsotgb7ouuecc.png)



* SPACE BETWEEN - Positions flex-items with equal size between each item.

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/jdy74c8vvadazxkgsu3n.png)



#### ALIGN ITEMS


Align items property is similar to that of justify content, but the difference is the axis along which both works. Align item works along the cross axis. To explain this i will do a minor change by increasing the height of the flex-container and removing the height of the flex-items.


```css
.flex-container{
    align-items: flex-start || flex-end || center || stretch || baseline
 }
```

* FLEX START - Flex start value is used to position flex items from the start of 
  the flex container i.e., along the cross axis's - cross start.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/bsi8sdh0oy4rdoxrjmxu.png)


* FLEX END - Flex END value is used to position flex items from the "END" of the 
  flex container i.e., along the cross axis's - cross end.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/96zya1c2y4imp0bia9e1.png)


* STRETCH (default) -  Stretches the flex item form the start to the end along 
  cross axis.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/xa2bkwnexh5eg5ut67vu.png)


* CENTER - Centers the flex item along the cross axis.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/7iy1382g24r5eebt6nhv.png)


* BASELINE - Initially baseline looks similar to the flex start, but the 
  difference is, the baseline positions the items in the same line with the first 
  line of the flex item. To make it noticebale I have increased the font size of 
  the first flex item.  


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/fzrxo3psqeh44q6o8gzu.png)



####ALIGN CONTENT


It controls how the flex-items are aligned in a multi-line flex container. We use align self when the flex-wrap property is set to wrap value.

```css
.flex-container {
    align-content : flex-start || flex-end || center || stretch 
}
```

* FLEX START -  Aligns the wraped flex items along cross axis's start.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/anblcll7d76rnss4qxnb.png)


* FLEX END -  Aligns the wraped flex items along cross axis's end.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/fspj6huf7h5hp30km9z1.png)


* CENTER  -  Aligns the wraped flex items along cross axis's center.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/fok1p2zo7ul68stnmi0x.png)


* STRETCH (default) -  stretches the wraped flex items along cross axis from 
  start to end.


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/rvz85r0m1wanzr7mxd2d.png)




###FLEX ITEMS


Flex items are the elements inside the flex container. 



The properties of flex items are 

>"Order || Flex-grow || Flex-shrink || Flex-basis".
 



####ORDER


Order property is used to order the flex items inside the container.


When we want to change the order of the flex-items without changing the html code we can use order property to do so.



By default all the flex items have an order 0. Which displays the elements in the same order,as in html code.


But when the order of a particular flex item is changed to 1, then that item will be ordered/placed at last.And when we have another flex item whose order value is set to 2, this item will be set next to the item with order 1.


```css
.flex-item:nth-child(1){
    order:1;
   }
.flex-item:nth-child(2){
    order:2;
   }
```


![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/r6bqnek9iqa15pkriqmp.png)


#### FLEX GROW


By default grow will have the value 0. which is the flex item will not grow inside the container.


```css
.flex-item {
   flex-grow:0;
   }
```


![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/7wpbm18j4f07ts12fmee.png)


When the value is set to 1, we can see the flex item grows inside the flex container in main axis. Even when we have the width property set to some value the flex item will grow.


```css
.flex-item {
   flex-grow:1;
   }
```

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/mpkgi263sy9u9oc1z2qi.png)



#### FLEX SHRINK


By default shrink will have the value 1. Which mean the flex item will shrink when we resize the browser size.


```css
.flex-item {
   flex-shrink:1;
   }
```


When the value is set to 0,the flex item doesn't shrink even when the browser size changes.


```css
.flex-item {
   flex-shrink:0;
   }
```


#### FLEX BASIS


This defines the default size of an element before the remaining space is distributed.

Flex basis with the value auto means the items size will be as of the content inside the item. 


```css
.flex-item {
   flex-basis : auto; 
   }
```

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/vk5f2g5mzfmdp54w4alf.png)


Flex basis with the value means the items size will be as of what is defined in the flex-basis value. 


```css
.flex-item {
   flex-basis : 100px; 
   }
```

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/6xv6mqmm7u5q4j15raei.png)



#### FLEX

Flex property is shorthand for flex-grow, flex-shrink and flex-basis.



```css
.flex-item {
   flex : 0 1 auto;
/* 
   flex-grow : 0;
   flex-shrink : 1;
   flex-basis : auto;
*/
    }
```

This is same as saying flex-grow : 0, flex-shrink : 1 and flex-basis : auto.



#### ALIGN SELF


We use align self to target a particular item and change the position of a single flex-item along the cross-axis, without affecting the neighboring flex-items.


Align self is same as align item, except that align self targets particular item.
Values used for align self are "auto || flex-start || flex-end || center || baseline || stretch". We will not go into each one in detail because this issame as align items. Lets have only one example to make this more clear.



```css
.flex-item:nth-child(3) {
   align-self : flex-end;
    }
```

![Alt text of image]
(https://thepracticaldev.s3.amazonaws.com/i/kjbu8qbknftx7eknh79z.png)


You can see only targetted item is positioned to the flex end.



### Understanding Margin Auto


When we add margin auto to the flex item, it centers the flex item by taking all the avilable space.


```css
.flex-item { 
    margin : auto;
}
```


![margin is set to auto](https://thepracticaldev.s3.amazonaws.com/i/6wfxvwi8gqzulu7c65c7.png)



> When we add two more flex items and when we target a particular flex item , that particular item taxes upa ll the space available.



```css
.flex-item:nth-child(1) { 
    margin-right : auto;
}
```


![margin is set to auto]
(https://thepracticaldev.s3.amazonaws.com/i/lzbhngvucjgdves7v0hl.png)


> Note that everything works perfect when the direction is set to row ,but when we change the direction to column all the properties will behave differently. I will try to cover all those, along with a project in which we will use flexbox.


Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.


There are a few flexbox playgrounds available online for experimenting:

[Flexbox Playground](https://demo.agektmr.com/flexbox/)
[Flexy Boxes](http://the-echoplex.net/flexyboxes/)
[Flexbox Properties Demonstration](https://codepen.io/justd/pen/yydezN)
[Flexbox Froggy](http://flexboxfroggy.com/)