-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut28-FlexBox.html
137 lines (113 loc) · 4.49 KB
/
tut28-FlexBox.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box</title>
<style>
.con {
border: 4px solid black;
display: flex;
/* initialize as flex container */
height: 400px;
width: 100%;
/* FLEX PROPERTIES FOR A CONTAINER */
/* Flex direction */
flex-direction: row;
/* Elements are aligned in row (Default) */
/* flex-direction: column; */
/* Elements are aligned in Column */
/* flex-direction: row-reverse; */
/* Elements are aligned in row-reverse */
/* flex-direction: column-reverse; */
/* Elements are aligned in row */
/* flex-wrap */
flex-wrap: nowrap;
/* Elements are as it is (Default) */
/* flex-wrap: wrap; */
/* Elements are Wrapped */
/* flex-wrap: wrap-reverse; */
/* Elements are Wrapped in reverse*/
/* flex-flow ( Short-hand for flex direction and flex wrap ) */
/* flex-flow: row wrap; */
/* Elements are aligned in row and Wrapped */
/* flex-flow: row-reverse wrap; */
/* Elements are aligned in row-reverse and Wrapped */
/* flex-flow: column wrap; */
/* justify-contents */
/* Gives different Allignments to align contents HORIZONTALLY */
/* justify-content: center; */
/* Alligns contents to the center */
/* justify-content: flex-start; */
/* Alligns contents from left */
/* justify-content: flex-end; */
/* Alligns contents from right */
/* justify-content: space-between; */
/* Alligns contents by giving equal spaces between them*/
/* justify-content: space-evenly; */
/* Alligns contents by giving equal spaces including edges*/
/* justify-content: space-around; */
/* Alligns contents by giving equal spaces for each element around it*/
/* align-items */
/* Gives different Allignments to align contents VERTICALLY */
/* align-items: center; */
/* Alligns contents to the center (Vertically)*/
/* align-items: flex-start; */
/* Alligns contents from top (Vertically)*/
/* align-items: flex-end; */
/* Alligns contents from bottom (Vertically)*/
/* align-items: stretch; */
/* Alligns contents by giving equal spaces between them */
}
.item {
width: 200px;
height: 200px;
border: 2px solid black;
background-color: rgb(228, 152, 139);
margin: 8px;
padding: 8px;
}
#item1 {
/* Flex properties for a Flex item */
order: 1;
/* Higher the order, moves to last in the container */
/* flex-grow: 2; */
/* Higher the weight,more it grows than other item */
/* flex-shrink: 2; */
/* Higher the weight,more it shrinks than other item */
flex-basis: 100px;
/* When flex-direction is set to row, flex-basis will control the width */
/* When flex-direction is set to column, flex-basis will control the height */
flex: 2 2 100px;
}
#item2 {
order: 2;
/* flex-grow: 3; */
/* flex-shrink: 3; */
}
#item3 {
order: 3;
align-self: center;
/* Alligns that element to the center */
/* align-self:flex-start; */
/* Alligns that element to the top */
/* align-self:flex-end; */
/* Alligns that element to the bottom */
/* align-self: stretch; */
/* Alligns that element by giving equal spaces between them */
}
</style>
</head>
<body>
<h2>Flex Box</h2>
<div class="con">
<div class="item" id="item1">Firts Box</div>
<div class="item" id="item2">Second box</div>
<div class="item" id="item3">Third box</div>
<!-- <div class="item" id="item4">Fourth Box</div>
<div class="item" id="item5">Fivth Box</div>
<div class="item" id="item6">Sixth Box</div> -->
</div>
</body>
</html>