flexbox css

1
2/*
3  flex is MIRACLE in web design
4  display: flex => can only be applied for the parent that hold another childs
5  controlling the children div's from the parent one 
6*/
7.parent{
8  display: flex;
9  flex-direction: column; /* row is default*/
10  flex-wrap: nowrap;
11  /*
12    evert html tag inside this div will be placed as columns inside each other.
13    for example: 
14      1_ our parent has 4 div inside it
15      2_ every div will take a width of 25% to fit its parent width
16      3_ assume that you add another div to group.
17      4_ now we have 5 children the width of each of them will be 100% / 5 => 20% for each
18      5_ so that the elements does not wrap
19      6_ everytime you add a new div the width will be calculated as follow:
20        100% / no. of childrens
21  */
22}
23.parent-1{
24  display: flex;
25  align-items: center;
26  justify-content: center;
27  /*
28    every div which his parent is .parent-1 will be centered horizanlty and vertically
29  */
30}
31.parent-2{
32  display: flex;
33  align-content: flex-end;
34  /*
35    align every child inside .parent-2 to the end of the div bounds
36  */
37}
38/*
39  Parent Flex Properties 
40  flex-direction: row row-reverse column column-reverse [row is Default]
41  flex-wrap: wrap nowrap => [nowrap is Default]
42  flex-flow: flex-direction flex-wrap [ShortHand]
43  justify-content: flex-end flex-start center space-around space-between space-evenly [flex-start is default]
44  align-items: center stretch flex-end flex-start baseline [stretch is Default]
45  align-content: flex-start flex-end center space-around space-between space-evenly
46*/

1Display: flex 
2Flex-direction: row | row-reverse | column | column-reverse
3align-self: flex-start | flex-end | center | baseline | stretch
4justify-content: start |  center | space-between | space-around | space-evenly

1/* 
2  Most Common Flexbox properties:
3
4    display: flex; 
5    flex-direction: row / column;     --> used to justify the direction of content
6    flex-wrap: wrap;                  --> holds the content inside flexbox container
7
8  These Properties are also part of flexbox and only apply on a container which contain flexbox property
9
10  Justify content:
11    center
12    start
13    end
14    baseline
15    space-around -->commonly used
16
17  Align items:
18    center  
19    baseline
20    
21  fr = fill up any available space
22
23*/
24
25.flexbox {
26    display: flex;
27    flex-direction: row;
28    flex-wrap: wrap;
29    justify-content: space-around;
30    /* column-count: 2;
31  columns: 2; */
32}

1.container {
2  flex-flow: column wrap;
3}

1.container {
2  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
3}

1.container {
2  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
3}