-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
401 lines (367 loc) · 25.3 KB
/
index.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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/ico" href="favicon_io/favicon.ico" />
<link rel="stylesheet" href="dark.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@384&family=Source+Code+Pro&family=Varela+Round&display=swap"
rel="stylesheet">
<title>Technical Documentation</title>
</head>
<body>
<button class="dark-mode-button top-dark-mode-button" aria-label="dark mode toggle">
<span aria-hidden="true" class="dark-toggle">
<span class="DTspan"></span>
</span>
</button>
<div class="page-wrap">
<div id="cross"></div>
<header>
<div class="header-text">
<h1>Technical Documentation: CSS Flex</h1>
<h2>What is Flexbox?</h2>
<p>The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout
model, and as a method that could offer space distribution between items in an interface and
powerful alignment capabilities. This article gives an outline of the main features of flexbox,
which we will be exploring in more detail in the rest of these guides.
</p>
</div>
<div class="header-image">
<img src="images/flexbox_logo.jpg" alt="A picture of a flexbox logo">
</div>
</header>
<div class="main-wrap">
<nav id="navbar">
<a class="nav-link" href="#terminology">terminology</a>
<h2 class="nav-title">Parent Properties</h2>
<a class="nav-link" href="#display">display</a>
<a class="nav-link" href="#flex-direction">flex-direction</a>
<a class="nav-link" href="#flex-wrap">flex-wrap</a>
<a class="nav-link" href="#flex-flow">flex-flow</a>
<a class="nav-link" href="#justify-content">justify-content</a>
<a class="nav-link" href="#align-items">align-items</a>
<a class="nav-link" href="#align-content">align-content</a>
<h2 class="nav-title">Child Properties</h2>
<a class="nav-link" href="#order">order</a>
<a class="nav-link" href="#flex-grow">flex-grow</a>
<a class="nav-link" href="#flex-shrink">flex-shrink</a>
<a class="nav-link" href="#flex-basis">flex-basis</a>
<a class="nav-link" href="#flex">flex</a>
<a class="nav-link" href="#align-self">align-self</a>
</nav>
<main id="main-doc">
<details id="terminology">
<summary>Terminology</summary>
<section id="terminology-text">
<p class="description-text">Items will be laid out following either the main axis (from
main-start to main-end) or the cross axis (from cross-start to cross-end).</p>
<ul class="description-list">
<li><mark>main axis</mark> – The main axis of a flex container is the primary axis along
which flex items are laid out. Beware, it is not necessarily horizontal; it depends on
the flex-direction property (see below).</li>
<li><mark>main-start | main-end</mark> – The flex items are placed within the container
starting from main-start and going to main-end.</li>
<li><mark>main size</mark> – A flex item’s width or height, whichever is in the main
dimension, is the item’s main size. The flex item’s main size property is either the
‘width’ or ‘height’ property, whichever is in the main dimension.</li>
<li><mark>cross axis</mark> – The axis perpendicular to the main axis is called the cross
axis. Its direction depends on the main axis direction.</li>
<li><mark>cross-start | cross-end</mark> – Flex lines are filled with items and placed into
the container starting on the cross-start side of the flex container and going toward
the cross-end side.</li>
<li><mark>cross size</mark> – The width or height of a flex item, whichever is in the cross
dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or
‘height’ that is in the cross dimension.</li>
</ul>
</section>
</details>
<h2 class="section-title">Properties for the Parent (flex container)</h2>
<div class="column-section">
<section class="main-section parent-section" id="display">
<h3 class="section-heading">display</h3>
<p class="description-text">This defines a flex container; inline or block depending on the g
class="description-list"iven value. It enables a flex context for all its direct children.
</p>
<figure>
<code>
<span class="code-selector">.container</span> {
<span class="code-property">display:</span> <span class="code-keyword">flex;</span> <span class="code-comment">/* or inline-flex */</span>
}
</code>
</figure>
<p>
Note that CSS columns have no effect on a flex container.
</p>
</section>
<section class="main-section parent-section" id="flex-direction">
<h3 class="section-heading">flex-direction</h3>
<p class="description-text">This establishes the main-axis, thus defining the direction flex
items are placed in the flex container. Flexbox is (aside from optional wrapping) a
single-direction layout concept. Think of flex items as primarily laying out either in
horizontal rows or vertical columns.</p>
<figure>
<code>
<span class="code-selector">.container</span> {
<span class="code-property">flex-direction:</span> <span class="code-keyword">row | row-reverse | column | column-reverse</span>;
}
</code>
</figure>
<ul class="description-list">
<li><mark>row-reverse</mark>: right to left in ltr; left to right in rtl</li>
<li><mark>column</mark>: same as row but top to bottom</li>
<li><mark>row</mark> (default): left to right in ltr; right to left in rtl</li>
<li><mark>column-reverse</mark>: same as row-reverse but bottom to top</li>
</ul>
</section>
<section class="main-section parent-section" id="flex-wrap">
<h3 class="section-heading">flex-wrap</h3>
<p class="description-text">By default, flex items will all try to fit onto one line. You can
change that and allow the items to wrap as needed with this property.</p>
<figure>
<code>
<span class="code-selector">.container</span> {
<span class="code-property">flex-wrap:</span> <span class="code-keyword">nowrap | wrap | wrap-reverse</span>;
}
</code>
</figure>
<ul class="description-list">
<li><mark>nowrap</mark> (default): all flex items will be on one line</li>
<li><mark>wrap</mark>: flex items will wrap onto multiple lines, from top to bottom.</li>
<li><mark>wrap-reverse</mark>: flex items will wrap onto multiple lines from bottom to top.
</li>
</ul>
</section>
<section class="main-section parent-section" id="flex-flow">
<h3 class="section-heading">flex-flow</h3>
<p class="description-text">This is a shorthand for the flex-direction and flex-wrap properties,
which together define the flex container’s main and cross axes. The default value is row
nowrap.</p>
<figure>
<code>
<span class="code-selector">.container</span> {
<span class="code-property">flex-flow:</span> <span class="code-keyword">column wrap</span>;
}
</code>
</figure>
</section>
<section class="main-section parent-section" id="justify-content">
<h3 class="section-heading">justify-content</h3>
<p class="description-text">This defines the alignment along the main axis. It helps distribute
extra free space leftover when either all the flex items on a line are inflexible, or are
flexible but have reached their maximum size. It also exerts some control over the alignment
of items when they overflow the line.</p>
<figure>
<code>
<span class="code-selector">.container</span> {
<span class="code-property">justify-content:</span> <span class="code-keyword">flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right</span>;
}
</code>
</figure>
<ul class="description-list">
<li><mark>flex-start</mark> (default): items are packed toward the start of the
flex-direction.</li>
<li><mark>flex-end</mark>: items are packed toward the end of the flex-direction.</li>
<li><mark>start</mark>: items are packed toward the start of the writing-mode direction.
</li>
<li><mark>end</mark>: items are packed toward the end of the writing-mode direction.</li>
<li><mark>left</mark>: items are packed toward left edge of the container, unless that
doesn’t make sense with the flex-direction, then it behaves like start.</li>
<li><mark>right</mark>: items are packed toward right edge of the container, unless that
doesn’t make sense with the flex-direction, then it behaves like end.</li>
<li><mark>center</mark>: items are centered along the line</li>
<li><mark>space-between</mark>: items are evenly distributed in the line; first item is on
the start line, last item on the end line</li>
<li><mark>space-around</mark>: items are evenly distributed in the line with equal space
around them. <aside>Note that visually the spaces aren’t equal, since all the items have
equal space on both sides. The first item will have one unit of space against the
container edge, but two units of space between the next item because that next item
has its own spacing that applies.</aside>
</li>
<li><mark>space-evenly</mark>: items are distributed so that the spacing between any two
items (and the space to the edges) is equal.</li>
</ul>
<aside>Note that that browser support for these values is nuanced. For example, space-between
never got support from some versions of Edge, and start/end/left/right aren’t in Chrome yet.
MDN has detailed charts. The safest values are flex-start, flex-end, and center.</aside>
</section>
<section class="main-section parent-section" id="align-items">
<h3 class="section-heading">align-items</h3>
<p class="description-text"> This defines the default behavior for how flex items are laid out
along the cross axis on the current line. Think of it as the justify-content version for the
cross-axis (perpendicular to the main-axis).</p>
<figure class="">
<code>
<span class="code-selector">.container</span> {
<span class="code-property">align-items:</span> <span class="code-keyword">stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end</span>;
}
</code>
</figure>
<ul class="description-list">
<li><mark>stretch</mark> (default): stretch to fill the container (still respect
min-width/max-width)</li>
<li><mark>flex-start / start / self-start</mark>: items are placed at the start of the cross
axis. The difference between these is subtle, and is about respecting the flex-direction
rules or the writing-mode rules.</li>
<li><mark>flex-end / end / self-end</mark>: items are placed at the end of the cross axis.
The difference again is subtle and is about respecting flex-direction rules vs.
writing-mode rules.</li>
<li><mark>center</mark>: items are centered in the cross-axis</li>
<li><mark>baseline</mark>: items are aligned such as their baselines align</li>
</ul>
</section>
<section class="main-section parent-section" id="align-content">
<h3 class="section-heading">align-content</h3>
<p class="description-text">This aligns a flex container’s lines within when there is extra
space in the cross-axis, similar to how justify-content aligns individual items within the
main-axis.
Note: This property only takes effect on multi-line flexible containers, where flex-flow is
set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow
is set to its default value, no-wrap) will not reflect align-content.</p>
<figure class="">
<code>
<span class="code-selector">.container</span> {
<span class="code-property">align-content:</span> <span class="code-keyword">flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline</span>;
}
</code>
</figure>
<ul class="description-list">
<li><mark>normal</mark> (default): items are packed in their default position as if no value
was set.</li>
<li><mark>flex-start / start</mark>: items packed to the start of the container. The (more
supported) flex-start honors the flex-direction while start honors the writing-mode
direction.</li>
<li><mark>flex-end / end</mark>: items packed to the end of the container. The (more
support) flex-end honors the flex-direction while end honors the writing-mode direction.
</li>
<li><mark>center</mark>: items centered in the container</li>
<li><mark>space-between</mark>: items evenly distributed; the first line is at the start of
the container while the last one is at the end</li>
<li><mark>space-around</mark>: items evenly distributed with equal space around each line
</li>
<li><mark>space-evenly</mark>: items are evenly distributed with equal space around them
</li>
<li><mark>stretch</mark>: lines stretch to take up the remaining space</li>
</ul>
</section>
</div>
<h2 class="section-title">Properties for the Children (flex items)</h2>
<div class="column-section">
<section class="main-section child-section" id="order">
<h3 class="section-heading">order</h3>
<p class="description-text">By default, flex items are laid out in the source order. However,
the
order property controls the order in which they appear in the flex container.</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">order:</span> <span class="code-value">5</span>; <span class="code-comment">/* default is 0 */</span>
}
</code>
</figure>
</section>
<section class="main-section child-section" id="flex-grow">
<h3 class="section-heading">flex-grow</h3>
<p class="description-text">This defines the ability for a flex item to grow if necessary. It
accepts a unitless value that serves as a proportion. It dictates what amount of the
available
space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be
distributed
equally to all children. If one of the children has a value of 2, the remaining space would
take
up twice as much space as the others (or it will try to, at least).</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">flex-grow:</span> <span class="code-value">4</span>; <span class="code-comment">/* default 0 */</span>
}
</code>
</figure>
<p>Negative numbers are invalid.</p>
</section>
<section class="main-section child-section" id="flex-shrink">
<h3 class="section-heading">flex-shrink</h3>
<p class="description-text">This defines the ability for a flex item to shrink if necessary.</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">flex-shrink:</span> <span class="code-value">3</span>; <span class="code-comment">/* default 1 */</span>
}
</code>
</figure>
<p>Negative numbers are invalid.</p>
</section>
<section class="main-section child-section" id="flex-basis">
<h3 class="section-heading">flex-basis</h3>
<p class="description-text">This defines the default size of an element before the remaining
space
is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword
means
“look at my width or height property” (which was temporarily done by the main-size keyword
until
deprecated). The content keyword means “size it based on the item’s content” – this keyword
isn’t well supported yet, so it’s hard to test and harder to know what its brethren
max-content,
min-content, and fit-content do.</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">flex-basis:</span> <span class="code-keyword"> | auto</span>; <span class="code-comment">/* default auto */</span>
}
</code>
</figure>
<p>
If set to 0, the extra space around content isn’t factored in. If set to auto, the extra
space
is
distributed based on its flex-grow value. See this graphic.
</p>
</section>
<section class="main-section child-section" id="flex">
<h3 class="section-heading">flex</h3>
<p class="description-text">This is the shorthand for flex-grow, flex-shrink and flex-basis
combined. The second and third parameters (flex-shrink and flex-basis) are optional. The
default
is 0 1 auto, but if you set it with a single number value, it’s like 1 0.</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">flex:</span> <span class="code-keyword">none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]</span>;
}
</code>
</figure>
<p>It is recommended that you use this shorthand property rather than set the individual
properties.
The shorthand sets the other values intelligently.
</p>
</section>
<section class="main-section child-section" id="align-self">
<h3 class="section-heading">align-self</h3>
<p class="description-text">This allows the default alignment (or the one specified by
align-items)
to be overridden for individual flex items.
Please see the align-items explanation to understand the available values.</p>
<figure>
<code>
<span class="code-selector">.item</span> {
<span class="code-property">align-self:</span> <span class="code-keyword">auto | flex-start | flex-end | center | baseline | stretch</span>;
}
</code>
</figure>
<p>Note that float, clear and vertical-align have no effect on a flex item.
</p>
</section>
</div>
</main>
</div>
</div>
<footer id="footer">
<p class="signature">Created by Adam Mann, 2021</p>
</footer>
<script src="main.js"></script>
</body>
</html>