-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·145 lines (139 loc) · 6.44 KB
/
index.html
File metadata and controls
executable file
·145 lines (139 loc) · 6.44 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Technical Document - Free Code Camp Project Challenge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Side Nav -->
<nav id="navbar">
<header>
CSS Flexbox
</header>
<ul>
<li><a href="#display:_flex;" class="nav-link">display: flex;</a></li>
<li><a href="#flex-direction:" class="nav-link">flex-direction:</a></li>
<li><a href="#justify-content:" class="nav-link">justify-content:</a></li>
<li><a href="#align-items:" class="nav-link">align-items:</a></li>
<li><a href="#flex-wrap:" class="nav-link">flex-wrap:</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="display:_flex;">
<header>
display: flex;
</header>
<div class="spacer"></div>
<div class="section-inner">
<p><code>display: flex;</code> instructs the browser to convert a <code>div</code> element into a flex. <br> Look at the following example:</p>
<p>CSS code:</p>
<div class="code-block">
<code>
<span class="css-selector">.container</span> {<br>
<span class="tag">display:</span> <span class="css-attribute">flex;</span><br>
} <br>
</code>
</div>
<br>
<p>HTML code:</p>
<div class="code-block">
<code>
<span class="tag"><div class="<span class="css-attribute">container</span>"></span><br>
This is a flex container <br>
<span class="tag"></div></span>
</code>
</div>
</div>
</section>
<section class="main-section" id="flex-direction:">
<header>
flex-direction:
</header>
<div class="spacer"></div>
<div class="section-inner">
<p>The flex direction determines the direction of the main and cross axes.</p>
<p>This can be a little confusing, as when the desired result is two columns, you will set the <code>flex-direction</code> to <code>row</code> so that the element can be divided horizonatally. Conversely, setting <code>flex-direction: column;</code> will set a vertical main axis, and items will be added along it.<br>
The following code creates a 50-50 horizontal split of the flex container.</p>
<p>CSS code:</p>
<div class="code-block">
<code>
<span class="css-selector">.container</span> {<br>
<span class="tag">display</span>: <span class="css-attribute">flex</span>;<br>
<span class="tag">flex-direction</span>: <span class="css-attribute">row</span>;<br>
<span class="tag">width</span>: <span class="css-attribute">100vw</span>;<br>
} <br>
<span class="css-selector">.col</span> {<br>
<span class="tag">width</span>: <span class="css-attribute">50%</span>;<br>
}<br>
<span class="css-selector">.left-col</span> {<br>
<span class="tag">background</span>: <span class="css-attribute">yellow</span>;<br>
}<br>
<span class="css-selector">.right-col</span> {<br>
<span class="tag">background</span>: <span class="css-attribute">blue</span>;<br>
}
</code>
</div><br><br>
<p>HTML code:</p>
<code>
<div class="container"><br>
<div class="col left-col"><br>
Left column<br>
</div><br>
<div class="col right-col"><br>
Right column<br>
</div><br>
</div>
</code>
</div>
</section>
<section class="main-section" id="justify-content:">
<header>
justify-content:
</header>
<div class="spacer"></div>
<div class="section-inner">
<p><code>justify-content:</code> aligns flex items along the main axis. The items can be aligned using the following attributes:</p>
<ul>
<li><code>flex-start</code> - aligns items to the left of the container</li>
<li><code>center</code> - centers the items horizonatally</li>
<li><code>flex-end</code> - aligns the items to the right of the container</li>
<li><code>space-between</code> - calculates space between each flex item and pushes the outermost items to the container's edges.</li>
<li><code>space-around</code> - similar to space between, but also adds space between the outermost items and the edges.</li>
<li><code>self</code> - allows alignment of a single element</li>
</ul>
</div>
</section>
<section class="main-section" id="align-items:">
<header>
align-items:
</header>
<div class="spacer"></div>
<div class="section-inner">
<p><code>align-items:</code> aligns flex items along the cross axis. The items can be aligned using the following attributes:</p>
<ul>
<li><code>flex-start</code> - aligns items to the top of the container</li>
<li><code>center</code> - centers the items vertically</li>
<li><code>flex-end</code> - aligns the items to the bottom of the container</li>
<li><code>space-between</code> - calculates space between each flex item and pushes the outermost items to the container's vertical edges.</li>
<li><code>space-around</code> - similar to space between, but also adds space between the outermost items and the vertical edges.</li>
<li><code>self</code> - allows alignment of a single element</li>
</ul>
</div>
</section>
<section class="main-section" id="flex-wrap:">
<header>
flex-wrap:
</header>
<div class="spacer"></div>
<div class="section-inner">
<p><code>flex-wrap:</code> forces flex items to <em>wrap</em> onto a new row if there is no more room in the viewport. This property can be used is some cases to avoid the use of breakpoints.</p>
<p>Without <code>flex-wrap: wrap;</code> the flex items would continue to be squashed as the viewport size shrinks.</p>
</div>
</section>
</main>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>