CSS - Flexbox

July 30, 2020

CSS - Flexbox

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.f{

height: 150px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

flex-direction: column; /*Default value is "row".Other values are column-reverse(It will show elements along column but upside down),row-reverse*/

}

.f1{

background-color:orange;

padding:10px;

}

.f2{

background-color:powderblue;

padding:10px;

}

.f3{

background-color:teal;

padding:10px;

}

.f4{

background-color:hotpink;

padding:10px;

}

.l{

width: 200px; /*Due to less width the items of inside this div will overflow.Now to handle this we have flex-wrap.You can do this by decreasing height too.But dont make both width and height less because then all boxes will be outside(they cant be fit).*/

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

flex-wrap:wrap; /*"nowrap" is default.Another is wrap-reverse(it will be same but in reverse order)*/

/*Next property is flex-flow which is short hand of flex-direction and flex-wrap.We can write both values in single property.

Ex-flex-wrap:wrap and flex-direction: column can be written as flex-flow:column wrap*/

}

.l div{

padding:20px; /*to make items out of the box so that flex-wrap could work.*/

}

.e{

height: 150px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

justify-content: center; /*It is for horizontal alignment(for flex-direction:row(default) but for flex-direction:column it becomes vertical alignment).flex-start is default value*/

}

.x{

height: 150px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

justify-content:space-evenly; /*Other values are flex-start,flex-end,space-around,space-between*/

/*Difference between space-evenly and space-around is that space-evenly is for same space from every side of the box but in space-around ,space between boxes is double of the space between box and top/bottom*/

}

.i{

height: 150px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

flex-direction: row;

align-items:center; /*It((align-items) is for vertical alignment(for flex-direction:row(default) but for flex-direction:column it becomes horizontal alignment).stretch is default value.Other values are flex-start,flex-end,stretch,baseline*/

}

.b{

width:350px;

height:400px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

flex-wrap: wrap;

align-content:space-around; /*It will work only if there is more than one row of boxes.It(align-content) is for vertical alignment.stretch is default value.Other values are flex-start,flex-end,stretch,center,space-between and space-evenly*/

}

.b div{

padding:20px;

}

.k{

height:500px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

}

.k div:nth-child(1){

align-self:center; /*It is use for vertical alignment of a individual(particular) box .It same as align-items but that one was for all boxes at once.It is for vertical alignment.Default value is auto.All values are auto,flex-start,flex-end,center,stretch,baseline*/

}

.k div:nth-child(2){

align-self:flex-start;

}

.k div:nth-child(3){

align-self:flex-end;

}

.a{

height: 200px;

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

}

.a div:nth-child(1){

order:1; /*It is used to set the order of the box.Default value of every box is 0.Order(left to right) will be from lesser to higher value.*/

}

.a div:nth-child(2){

order:0;

}

.a div:nth-child(3){

order:-1;

}

.a div:nth-child(4){

order:-3;

}

.hi{

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

}

.hi div{

flex-grow:1; /*It is used to grow the width of the box.Default value is zero.If "flex-grow:1" then all will have same width (covering all the spaces between the boxes)*/

}

.hello{

padding:20px;

margin:10px;

border:2px solid black;

background-color:grey;

display:flex;

}

.hello div:nth-child(1){

flex-grow:1; /*This is the first box*/

}

.hello div:nth-child(2){

flex-grow:2; /*This will be the twice of the first box*/

}

.hello div:nth-child(3){

flex-grow:3; /*This will be the thrice of the first box*/

}

.hello div:nth-child(4){

flex-grow:4; /*This will be the four times of the first box*/

}

.world{

border:2px solid black;

background-color:grey;

display:flex;

}

.world div:nth-child(1){

flex-basis:90px; /*It is same as max-width.It can take values in percent too.Ex- flex-basis:23%(23% of container's width)*/

}

.world div:nth-child(2){

flex-basis:50%;

}

.world div:nth-child(3){

flex-basis:30%;

}

.world div:nth-child(4){

flex-basis:20%;

}

.go{

border:2px solid black;

background-color:grey;

display:flex;

}

.go div{

width:310px;

}

.go div:nth-child(1){

flex-shrink:4; /*It will make the box width shrink by 4 times of the other box.You can see the effect when you shrink the website dialog box.Default value is 1.If value is 0 then that means no shrink and if there is no more space left,items will overflow (when you shrink the dialog box)*/

}

.go div:nth-child(2){

flex-shrink:0;

}

.go div:nth-child(3){

flex:2 0 200px; /*This is the short-hand of flex-grow,flex-shrink and flex-basis*/

}

.go div:nth-child(4){

flex-shrink:0;

}

/*Flex with margin:auto*/

.gone{

border:2px solid black;

background-color:grey;

display:flex;

margin:10px;

height:50px;

padding:20px;

}

.gone div:nth-child(1){

font-size:20px;

margin:auto; /*margin:"auto" means All available space will be taken from all side which make it at center*/

background-color:teal;

}

.goa{

border:2px solid black;

background-color:grey;

display:flex;

margin:10px;

height:50px;

padding:20px;

}

.goa div:nth-child(1){

font-size:20px;

margin-left:auto; /*All available space will be taken from left side*/

background-color:teal;

}

.indi{

border:2px solid black;

background-color:grey;

display:flex;

margin:10px;

height:150px;

padding:20px;

align-items:center;

}

.indi div:nth-child(1){

margin-right: auto;

}

.indi div:nth-child(2){

margin-top: auto;

}

.indi div:nth-child(3){

margin-bottom: auto;

}

.indi div:nth-child(4){

margin-left: auto;

}

.cont{ /*This is a flexbox*/

border:2px solid black;

background-color:grey;

display:flex;

margin:10px;

height:450px;

padding:20px;

flex-direction: column;

justify-content:space-evenly;

}

.cont > .nesting{ /*This is the flex item but also a nested flexbox*/

display: flex;

border:2px solid teal;

background-color:yellow;

margin:10px;

padding:20px;

justify-content:space-evenly;

}

.nest1,.nest2,.nest3{

margin:10px;

text-align:center;

flex-grow: 1;

}

.nest1{

background-color:purple;

padding:10px;

}

.nest2{

background-color:coral;

padding:10px;

}

.nest3{

background-color:darkred;

padding:10px;

}

</style>

<title></title>

</head>

<body>

<div class="f">