HTML5-CSS-Pratice/play.css at master · JohnDesouzaAmbrose/HTML5-CSS-Pratice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
body
{

}
#parent
{

display:-webkit-box;

/* To align horizontally we use below line of code*/
-webkit-box-pack:center;

max-width:1000px;

border:3px solid black;
-webkit-box-orient:horizontal;
/*-webkit-box-direction:reverse;*/
height:500px;

/* To align vertically we use below line of code*/
-webkit-box-align:center;
}
#kid1
{
border:1px dotted red;
padding:20px;
margin: 10px;
background-color:yellow;
-webkit-box-ordinal-group:3;
-webkit-box-flex: 1;
height:200px;
}

#kid2
{
border:1px dotted red;
padding:20px;
margin: 10px;
background-color:green;
-webkit-box-ordinal-group:4;
-webkit-box-flex: 1;
height:200px;
}
#kid3
{
border:1px dotted red;
padding:20px;
margin: 10px;
background-color:orange;
-webkit-box-ordinal-group:1;
-webkit-box-flex: 1;
height:200px;
}
#kid4
{
border:1px dotted red;
padding:20px;
margin: 10px;
background-color:blue;
-webkit-box-ordinal-group:2;
-webkit-box-flex: 4;/* Makes this div width equal to 4*[{1/(1+1+1+4)}*width of parent}] */
height:200px;
}