Responsive web design (Flexbox) 
Tags: css, beginners, webdev, devops
Published: 2020-01-01 19:19:12

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qaiwq8wnljdu6b20cr7n.jpg)
#Flexbox

The Flexbox , makes it easier to design flexible responsive layout structure without using float or positioning.


Before the Flexbox, there were four layout modes:

 - Block, for sections in a webpage
 - Inline, for text
 - Table, for two-dimensional table data
 - Positioned, for explicit position of an element

##Example:

###HTML:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/30jkhlldkvrotjr0ft4p.png)

###Css:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lp6aia3310a9h7vad683.png)

##Parent Element (Container)
The flex container becomes flexible by setting the display property to flex
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/as5uhpicovaym0ucex17.png)

##Flexbox consists of two parts:
	°container properties(parents) 
	°item properties(Children) 
The flex container properties are:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

The flex item properties are:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

#container properties(parents) 
##Align-content
	 °align-content: stretch;
	 °align-content: flex-start;
	 °align-content: flex-end;
	 °align-content: center;
 	 °align-content: space-between;
 	 °align-content: space-around;

The align-content property is a sub-property of the Flexbox.

It helps to align a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

1- Stretch (_default_) 
lines stretch to take up the remaining space. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p71rfofvz2oqa5iq3n1e.png)

2- Flex-start
lines packed to the start of the container. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bzdyr5q09cxp8m89ymsp.png)

3- Flex-end 
lines packed to the end of the container. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1egs6mr67lnub3yosoyf.png)

4- Center: 
lines packed to the center of the container. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jietos9fr9qgmfrs80jt.png)

5- Space-between
lines evenly distributed; the first line is at the start of the container while the last one is at the end. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vcfmtdv9dlozga8ozeex.png)

6- Space-around
lines evenly distributed with equal space between them. 

###HTML 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t3v8taj2n5gvov7kmwsg.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2zjj5sfnw89zvmsmje1r.png)

#Align-items
	 *align-items: stretch;
	 *align-items: flex-start;
	 *align-items: flex-end;
	 *align-items: center;
	 *align-items: baseline;
	 

This defines the default behavior for how flex items are laid out along the cross axis on the current line. 

1- Stretch (_default_)
stretch to fill the container. 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3dpqscy37e9lici0phd.png)

#Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v90zyeu2oqwk1gpzm2hz.png)

2- Flex-start
items are placed at the start of the cross axis.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3dpqscy37e9lici0phd.png)

#Css

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sawyktmo50h9n3ovm30h.png)


3- Flex-end
items are placed at the end of the cross axis.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3dpqscy37e9lici0phd.png)

#Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5owbft1hdgelzhtsgcxo.png)


4- Center
items are centered in the cross-axis. 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3dpqscy37e9lici0phd.png)

#Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1hwjfxqvd8cvc23mqtsq.png)


5- Baseline
items are aligned such as their baselines align. 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a3dpqscy37e9lici0phd.png)

#Css

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zdvhgrb09s8dqtk604bm.png)

#flex-wrap
 	*flex-wrap: nowrap;
 	*flex-wrap: wrap;
 	*flex-wrap: wrap-reverse;

By default, flex items will all try to fit onto one line.

1- Nowrap  (_default_)
all flex items will be on one line.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ko4hevhihaig19ieen7f.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ojw9fvkf4gktoft2mmr6.png)
2- Wrap 
flex items will wrap onto multiple lines, from top to bottom.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ko4hevhihaig19ieen7f.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/exjf3bto3fer3xmu8u9o.png)
3- Wrap-reverse 
flex items will wrap onto multiple lines from bottom to top.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ko4hevhihaig19ieen7f.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rz9zpci7jj4shc4r749s.png)

##justify-content
 	*justify-content: flex-start;
 	*justify-content: flex-end;
 	*justify-content: center;
 	*justify-content: space-between;
 	*justify-content: space-around;

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. 

1- Flex-start  (_default_)
tems are packed toward the start of the flex-direction.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e89l4i24phq567i3film.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/t176ct0yidcgu1579llb.png)

2- Flex-end 
items are packed toward the end of the flex-direction.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e89l4i24phq567i3film.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7wjoi7sdckp8mvq1wlao.png)

3- Center 
items are centered along the line

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e89l4i24phq567i3film.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wt7r6z03g0mzjip2ta0c.png)

4- Space-between 
items are evenly distributed in the line; first item is on the start line, last item on the end line. 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e89l4i24phq567i3film.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5x154ajzgc331c9lhkid.png)

5- Space-around 
items are evenly distributed in the line with equal space around them.

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e89l4i24phq567i3film.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p4zfk0edd9hk0c2sqe75.png)

##Flex-direction
 	*flex-direction: row;
 	*flex-direction: row-reverse;
 	*flex-direction: column;
 	*flex-direction: column-reverse;

1- Row (_default_)
left to right in ltr; right to left in rtl.

##Example 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gdzg8i0pgf4ih5y9mkfy.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xefqw8gpsjyd9942vixo.png) 

2- Row-reverse 
right to left in ltr; left to right in rtl. 

##Example 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gdzg8i0pgf4ih5y9mkfy.png)


###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9u7mg4p32ztijypm5xc3.png)

3- Column 
same as row but top to bottom. 

##Example 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gdzg8i0pgf4ih5y9mkfy.png)
 

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oj7s04wk8q49oosct034.png)

4- Column-reverse 
same as row-reverse but bottom to top. 

##Example 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gdzg8i0pgf4ih5y9mkfy.png)
 

#Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/61cipfanzat4ku37a29o.png)

_____________________________

#item properties(Children)
##Flex-shrink
 	*flex-shrink: 1;
 	*flex-shrink: 0;
 	*flex-shrink: 2;

This defines the ability for a flex item to shrink if necessary.

The value is number but negative numbers only.

##Example:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fq6v7gvzis9n83asbvih.png)

##Align-self
 	*align-self: auto;
	*align-self: stretch;
	*align-self: flex-start;
 	*align-self: flex-end;
 	*align-self: center;
 	*align-self: baseline;
 	

This allows the default alignment to be overridden for individual flex items.



1- Auto will make the item perfectly centered in both axes.

_see the align-items explanation to understand the available values_

##Example:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xqwkrxg0i4s3k35488cx.png)

##Flex-basis
 	*flex-basis: auto;
 	*flex-basis: 80px;

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

1- Auto (_default_)

2- Length (e.g. 20%, 5rem, etc.) 

##Example:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5cqg63khfvjslc6r5l9u.png)
 
##order
 	*order: 0;
 	*order: 1;
 	*order: -1;
 	*order: 9;

By default, flex items are laid out in the source order. 

##Example:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oo5wtwnpkwslqpakxbbr.png)


#Perfect Centering
Set the (justify-content) and (align-items) properties to _center_, and the flex item will be perfectly centered.

##Example 

###HTML
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rhp68v407swi57i16kw3.png)

###Css
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wvqze0ypgvdzzvxwl3cz.png)

##More Examples:

{% codepen https://codepen.io/team/css-tricks/pen/EKEYob %}


Important examples for all items ⬇️

https://codepen.io/enxaneta/full/adLPwv

https://codepen.io/rikstar/post/flexbox

________________
Follow me on my Instagram account
https://www.instagram.com/karimcoda

Social media:
http://linktr.ee/karimcoda2