-
Notifications
You must be signed in to change notification settings - Fork 0
/
flexbox-review.html
237 lines (236 loc) · 10.9 KB
/
flexbox-review.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FLEXBOX REVIEW</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
</head>
<body>
<h1 class="text-center"><u>FLEXBOX REVIEW</u></h1>
<p>
This is an optional flexbox demo w/o using 'navs' to illustrate how it
works with other elements
</p>
<div class="container">
<h2>FLEX DEMO</h2>
<div>
<p>By default the display is set to 'display: block' below</p>
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>
So as of right now, our display property is set to: 'display: block',
now before we can do anything we must give the parent div containing our
buttons a display of 'd-flex'
</p>
<div class="d-flex">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>Now with display set to flex, we can move things around!</p>
<div class="d-flex">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>
So we can decide to change them into a column with: 'd-flex flex-column'
</p>
<div class="d-flex flex-column">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>We could also reverse the order with: 'd-flex flex-column-reverse'</p>
<div class="d-flex flex-column-reverse">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>We can do the same with 'row-reverse</p>
<div class="d-flex flex-row-reverse">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>Now let's play around with the 'justify-content' property</p>
Normal:
<div class="d-flex">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>justify-content-end:</p>
<div class="d-flex justify-content-end">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>justify-content-center</p>
<div class="d-flex justify-content-center">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>justify-content-between</p>
<div class="d-flex justify-content-between">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>justify-content-around:</p>
<div class="d-flex justify-content-around">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>Now let's reverse it!</p>
<div class="d-flex flex-row-reverse justify-content-end">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
<p>
When we do row-reverse, our 'end' flips to the left side of the screen,
and our 'start' is on the right, it's flipped or 'reversed'
</p>
<p>There's another property called 'align items'</p>
<p>Align items work along the x-axis/cross-axis left to right,</p>
<p>Let's add a style = height: 400px</p>
<p>Now we have this big space below our buttons</p>
<div class="container">
<div class="d-flex border" style="height: 400px"">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<div class="container">
<div class="d-flex border" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>We can add 'align-items-end' and they move to the bottom
of their 400px
</p>
<div class="container">
<div class="d-flex border align-items-end" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>We can do the same with 'align-items-center</p>
<div class="container">
<div class="d-flex border align-items-center" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>We can also add justify-content center to center them
in the 400px
</p>
<div class="container">
<div class="d-flex border align-items-center justify-content-center" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>If we change it to be a flex column</p>
<div class="container">
<div class="d-flex border flex-column" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>When we add justify-content, we refer to the y axis, since
it's top to bottom, let's add justify-content-center:
</p>
<div class="container">
<div class="d-flex border flex-column justify-content-center" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>Now let's try justify-content-between</p>
<div class="container">
<div class="d-flex border flex-column justify-content-between" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>And let's add align-items-center:</p>
<div class="container">
<div class="d-flex border flex-column justify-content-between align-items-center" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>We could also just use justify-content-center:</p>
<div class="container">
<div class="d-flex border flex-column justify-content-center align-items-center" style="height: 400px">
<button class="btn btn-lg btn-danger">Button 1</button>
<button class="btn btn-lg btn-warning">Button 2</button>
<button class="btn btn-lg btn-success">Button 3</button>
<button class="btn btn-lg btn-info">Button 4</button>
</div>
</div>
<p>The main takeaway here is that we can use these Utilities on
anything, not just navs/buttons, flexbox is a very powerful
tool
</p>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>