-
Notifications
You must be signed in to change notification settings - Fork 0
/
index4.html
266 lines (250 loc) · 11.1 KB
/
index4.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
<!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/style4.css">
<title>FLEXBOX Projekt</title>
</head>
<body>
<header>
<div>
<img src="images/img11.jpg" alt="Logo CSS3">
</div>
<div>
<h1>FLEXBOX</h1>
<h2>Fiche de revision</h2>
</div>
</header>
<article>
<section>
<h2>Container's propreties</h2>
<div>
<h3>Display</h3>
<p>Le Display flex est donne au container et il permet de rendre tous les items flexible.</p>
<div class="code">
<p>#container{
<span>display: flex | inline-flex;</span>}
</p>
</div>
</div>
<div>
<h3>flex-direction</h3>
<p>Par defaut les items se retrouvent l'un a cote de l'autre et ils ont pour largeur ce qu'il contiennent.</p>
<div class="code">
<p>#container{
<span>flex-direction: row | row-inverse | column | column-inverse;</span>}
</p>
</div>
<ul>
<li>
<strong>row :</strong>(Par defaut) Les items sont aligne en ligne de gauche a droite.
</li>
<li>
<strong>row-reverse :</strong> Les items sont aligne en ligne inversee de droite a gauche.
</li>
<li>
<strong>column :</strong> Les items sont empiles l'un sur l'autre de haut en bas.
</li>
<li>
<strong>column-reverse :</strong> Les items sont empiles l'un sur l'autre de bas en haut.
</li>
</ul>
</div>
<div>
<h3>flex-wrap</h3>
<p>Par defaut les items ne reviennent pas a la ligne.</p>
<div class="code">
<p>#container{
<span>flex-wrap: nowrap | wrap | wrap-reverse</span>}
</p>
</div>
<ul>
<li>
<strong>nowrap :</strong>(Par defaut) Les items ne reviennent pas a la ligne.
</li>
<li>
<strong>wrap :</strong> Les items reviennent a la ligne.
</li>
<li>
<strong>wrap-reverse :</strong> Les items reviennent a la ligne de maniere inversee.
</li>
</ul>
</div>
<div>
<h3>flex-flow</h3>
<p>Propriete generique reunissant flex-direction et flex-wrap.</p>
<div class="code">
<p>#container{
<span>flex-flow: column wrap</span>}
</p>
</div>
</div>
<div>
<h3>justify-content</h3>
<p>Aligne les items suivant l'axe principal.</p>
<div class="code">
<p>#container{
<span>justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly</span>}
</p>
</div>
<ul>
<li>
<strong>flex-start :</strong> (Par defaut) Les items demarrent au debut de l'axe principal
</li>
<li>
<strong>flex-end :</strong> Les items demarrent a la fin de l'axe principal
</li>
<li>
<strong>center :</strong> Les items centres selon l'axe pricipal.
</li>
<li>
<strong>space-around :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe principal d'une distance correspond a la moitie de la valeur de la distance qui separe les items du milieu. Les items du milieu sont espaces d'une distance equivalente.
</li>
<li>
<strong>space-between :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe principal. Les items du milieu sont espaces d'une distance equivalente.
</li>
<li>
<strong>space-evenly :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe principal d'une distance qui separe les items du milieu. Les items du milieu sont espaces d'une distance equivalente.
</li>
</ul>
</div>
<div>
<h3>align-items</h3>
<p>Aligne les items suivant l'axe secondaire.</p>
<div class="code">
<p>#container{
<span>align-items: stretch | flex-start | flex-end | center | baseline</span>}
</p>
</div>
<ul>
<li>
<strong>stretch :</strong> (Par defaut) Les items occupent toute la largeur qui leur est alouee.
</li>
<li>
<strong>flex-start :</strong> Les items demarrent au debut de l'axe secondaire.
</li>
<li>
<strong>flex-end :</strong> Les items demarrent a la fin de l'axe secondaire.
</li>
<li>
<strong>center :</strong> Les items centres selon l'axe secondaire.
</li>
<li>
<strong>baseline :</strong> Les items sont alignes suivant leur ligne de base.
</li>
</ul>
</div>
<div>
<h3>align-content</h3>
<p>Ne fontionne que si il y a plusieurs lignes ou plusieurs cologne.</p>
<div class="code">
<p>#container{
<span>align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly</span>}
</p>
</div>
<ul>
<li>
<strong>stretch :</strong> (Par defaut) Les items occupent toute la largeur qui leur est alouee.
</li>
<li>
<strong>flex-start :</strong> Les items demarrent au debut de l'axe secondaire.
</li>
<li>
<strong>flex-end :</strong> Les items demarrent a la fin de l'axe secondaire.
</li>
<li>
<strong>center :</strong> Les items centres selon l'axe secondaire.
</li>
<li>
<strong>space-around :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe secondaire d'une distance correspond a la moitie de la valeur de la distance qui separe les items du milieu. Les items du milieu sont espaces d'une distance equivalente.
</li>
<li>
<strong>space-between :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe secondaire. Les items du milieu sont espaces d'une distance equivalente.
</li>
<li>
<strong>space-evenly :</strong> Les items sont alignes de gauche a droite et ils sont calles au debut et la fin de l'axe secondaire d'une distance qui separe les items du milieu. Les items du milieu sont espaces d'une distance equivalente.
</li>
</ul>
</div>
</section>
<section>
<h2>Content's propreties</h2>
<div>
<h3>align-self</h3>
<p>Permet d'aligner une item particulier. Propriete prioritaire!</p>
<div class="code">
<p>.item{
<span>align-self: stretch | flex-start | flex-end | center | baseline</span>}
</p>
</div>
<ul>
<li>
<strong>stretch :</strong> (Par defaut) L'item occupe toute la largeur qui lui est alouee.
</li>
<li>
<strong>flex-start :</strong> L'item demarre au debut de l'axe secondaire.
</li>
<li>
<strong>flex-end :</strong> L'item demarre a la fin de l'axe secondaire.
</li>
<li>
<strong>center :</strong> L'item est centre selon l'axe secondaire.
</li>
<li>
<strong>baseline :</strong> L'items est aligne suivant sa ligne de base.
</li>
</ul>
</div>
<div>
<h3>order</h3>
<p>Permet d'ordonner l'affichage des items. La valeur par defaut est 0</p>
<div class="code">
<p>.item{
<span>order: 1</span>}
</p>
</div>
</div>
<div>
<h3>flex-grow</h3>
<p>Permet de definir la largeur d'un item. La valeur par defaut est 0</p>
<div class="code">
<p>.item{
<span>flex-grow: 0</span>}
</p>
</div>
</div>
<div>
<h3>flex-shrink</h3>
<p>Permet de diminuer la largeur d'un item. La valeur par defaut est 1</p>
<div class="code">
<p>.item{
<span>flex-shrink: 1</span>}
</p>
</div>
</div>
<div>
<h3>flex-basis</h3>
<p>Permet de faire varier ou non la largeur d'un item. La valeur par defaut est auto</p>
<div class="code">
<p>.item{
<span>flex-basis: auto</span>}
</p>
</div>
</div>
<div>
<h3>flex</h3>
<p>Propriete generique reunissant les proprietes flex-grow, flex-shrink et flex-basis.</p>
<div class="code">
<p>.item{
<span>flex: 0 1 auto</span>}
</p>
</div>
</div>
</section>
</article>
<footer>
<p>Etre a l'aise avec FLEXBOX!</p>
</footer>
</body>
</html>