Skip to content

Commit df3ab47

Browse files
jessicarushjessicarush
committed
Add: examples
1 parent ce82d06 commit df3ab47

File tree

4 files changed

+183
-64
lines changed

4 files changed

+183
-64
lines changed

‎css_flexbox/base.css‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,6 @@ a:active {
5858
color: var(--emphasis-color);
5959
}
6060

61-
62-
6361
/* LAYOUT ----------------------------------------------------------------- */
6462

6563
.flexible {
@@ -104,6 +102,7 @@ a:active {
104102

105103
.container-b {
106104
display: flex;
105+
gap: 5px;
107106
}
108107

109108
.container-b__content-a {
@@ -261,38 +260,62 @@ a:active {
261260

262261

263262
.container-h {
263+
min-height: 400px;
264264
display: flex;
265265
flex-direction: row;
266-
align-items: center;
267266
flex-wrap: wrap;
267+
gap: 5px;
268+
/* align-items: center; */
268269
/* The align-content property has no effect on single-line flex boxes */
269270
/* align-content: flex-start; */
270271
/* align-content: flex-end; */
271272
/* align-content: baseline; */
272273
/* align-content: first baseline; */
273274
/* align-content: last baseline; */
274-
/* align-content: center; */
275+
align-content: center;
275276
/* align-content: stretch; */
276277
/* align-content: space-around; */
277278
/* align-content: space-evenly; */
278-
align-content: space-between;
279+
/* align-content: space-between; */
279280
}
280281

281282
.container-h__content-a {
282-
width: 150px;
283-
height: 150px;
283+
/* flex: 300px; */
284+
width: 200px;
284285
}
285286

286-
.container-h__content-b {
287-
width: 150px;
288-
height: 150px;
287+
.container-i {
288+
min-height: 400px;
289+
display: flex;
290+
flex-direction: row;
291+
flex-wrap: wrap;
292+
gap: 5px;
293+
align-content: center;
289294
}
290295

291-
.container-h__content-c {
292-
width: 150px;
293-
height: 150px;
296+
.container-i__content-a {
297+
/* flex: 200px is shorthand for flex: 1 1 200px; which is shorthand for */
298+
/* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
299+
flex: 200px;
300+
}
301+
302+
.container-j {
303+
display: flex;
304+
flex-direction: row;
305+
flex-wrap: wrap;
306+
gap: 5px;
294307
}
295308

309+
.container-j__content-a {
310+
/* flex: 200px is shorthand for flex: 1 1 200px; which is shorthand for */
311+
/* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
312+
/* This max says min width 200px and no more than 3 items per row. */
313+
flex: max(300px, (100% - 10px) / 3);
314+
/* Where the above formula has to account for the gap, we can also do this */
315+
flex: max(300px, 100% / 4 - 0.1%);
316+
/* Important because we're adding padding elsewhere */
317+
box-sizing: border-box;
318+
}
296319

297320

298321
/* COMPONENTS ------------------------------------------------------------- */
@@ -303,8 +326,6 @@ a:active {
303326
color: var(--minor-color);
304327
}
305328

306-
307-
308329
/* UTILITY ---------------------------------------------------------------- */
309330

310331
/* STATE ------------------------------------------------------------------ */

‎css_flexbox/index.html‎

Lines changed: 72 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h1>Flexbox Container Properties.</h1>
3838
<li>justify-content: space-between;</li>
3939
<li>align-items: center;</li>
4040
<li>flex-wrap: wrap;</li>
41-
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items */</li>
41+
<li>gap: 5px;</li>
42+
<li class="comment">/* Note: align-content has no effect when there is only one line of flex items or the container height isn't greater than the content.*/</li>
4243
<li>align-content: space-between;</li>
4344
<li class="comment"><em>/* (Shorthand) flex-flow: flex-direction flex-wrap; */</em></li>
4445
<li>flex-flow: row wrap;</li>
@@ -66,7 +67,9 @@ <h1>Flexbox Items Properties.</h1>
6667
<li>flex-basis: 200px;</li>
6768
<li>align-self: center;</li>
6869
<li class="comment"><em>/* (Shorthand) flex: flex-grow flex-shrink flex-basis; */</em></li>
69-
<li>flex: 2 0 0;</li>
70+
<li>flex: 1 1 200px;</li>
71+
<li class="comment"><em>/* (Shorthand) equivalent to flex: 1, 1, 200px; */</em></li>
72+
<li>flex: 200px;</li>
7073
</ul>
7174
</code>
7275
</div>
@@ -75,7 +78,7 @@ <h1>Flexbox Items Properties.</h1>
7578
</div>
7679
</div>
7780

78-
<div class="container-d flexible">
81+
<div class="container-d flexible fixed-height">
7982
<div class="container-d__content-a box">
8083
<p>A</p>
8184
</div>
@@ -133,32 +136,80 @@ <h1>Flexbox Items Properties.</h1>
133136
<div class="container-h__content-a box">
134137
<p>A</p>
135138
</div>
136-
<div class="container-h__content-b box">
137-
<p>B</p>
139+
<div class="container-h__content-a box">
140+
<p>A</p>
138141
</div>
139-
<div class="container-h__content-c box">
140-
<p>C</p>
142+
<div class="container-h__content-a box">
143+
<p>A</p>
141144
</div>
142-
<div class="container-h__content-c box">
143-
<p>C</p>
145+
<div class="container-h__content-a box">
146+
<p>A</p>
144147
</div>
145-
<div class="container-h__content-c box">
146-
<p>C</p>
148+
<div class="container-h__content-a box">
149+
<p>A</p>
147150
</div>
148-
<div class="container-h__content-c box">
149-
<p>C</p>
151+
<div class="container-h__content-a box">
152+
<p>A</p>
150153
</div>
151-
<div class="container-h__content-c box">
152-
<p>C</p>
154+
<div class="container-h__content-a box">
155+
<p>A</p>
153156
</div>
154-
<div class="container-h__content-c box">
155-
<p>C</p>
157+
<div class="container-h__content-a box">
158+
<p>A</p>
156159
</div>
157-
<div class="container-h__content-c box">
158-
<p>C</p>
160+
</div>
161+
162+
<div class="container-i flexible">
163+
<div class="container-i__content-a box">
164+
<p>A</p>
159165
</div>
160-
<div class="container-h__content-c box">
161-
<p>C</p>
166+
<div class="container-i__content-a box">
167+
<p>A</p>
168+
</div>
169+
<div class="container-i__content-a box">
170+
<p>A</p>
171+
</div>
172+
<div class="container-i__content-a box">
173+
<p>A</p>
174+
</div>
175+
<div class="container-i__content-a box">
176+
<p>A</p>
177+
</div>
178+
<div class="container-i__content-a box">
179+
<p>A</p>
180+
</div>
181+
<div class="container-i__content-a box">
182+
<p>A</p>
183+
</div>
184+
<div class="container-i__content-a box">
185+
<p>A</p>
186+
</div>
187+
</div>
188+
189+
<div class="container-j flexible">
190+
<div class="container-j__content-a box">
191+
<p>A</p>
192+
</div>
193+
<div class="container-j__content-a box">
194+
<p>A</p>
195+
</div>
196+
<div class="container-j__content-a box">
197+
<p>A</p>
198+
</div>
199+
<div class="container-j__content-a box">
200+
<p>A</p>
201+
</div>
202+
<div class="container-j__content-a box">
203+
<p>A</p>
204+
</div>
205+
<div class="container-j__content-a box">
206+
<p>A</p>
207+
</div>
208+
<div class="container-j__content-a box">
209+
<p>A</p>
210+
</div>
211+
<div class="container-j__content-a box">
212+
<p>A</p>
162213
</div>
163214
</div>
164215

‎css_grid/base.css‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
@charset "UTF-8";
22

3-
4-
53
/* VARIABLES -------------------------------------------------------------- */
64

75
:root {
8-
--heading-font: 'Open Sans', sans-serif;
9-
--main-font: 'Open Sans', sans-serif;
10-
--minor-font: 'Open Sans', sans-serif;
11-
--heading-color: rgba(0,0,50,.9);
12-
--main-color: rgba(70,70,90,.9);
13-
--minor-color: rgb(180,180,190);
14-
--emphasis-color: rgb(27,211,165);
6+
--heading-font: "Open Sans", sans-serif;
7+
--main-font: "Open Sans", sans-serif;
8+
--minor-font: "Open Sans", sans-serif;
9+
--heading-color: rgba(0, 0, 50, 0.9);
10+
--main-color: rgba(70, 70, 90, 0.9);
11+
--minor-color: rgb(180, 180, 190);
12+
--emphasis-color: rgb(27, 211, 165);
1513
}
1614

17-
18-
1915
/* DEFAULTS --------------------------------------------------------------- */
2016

2117
html {
@@ -60,8 +56,6 @@ a:active {
6056
color: var(--emphasis-color);
6157
}
6258

63-
64-
6559
/* LAYOUT ----------------------------------------------------------------- */
6660

6761
.base {
@@ -71,6 +65,10 @@ a:active {
7165
margin: 15px auto;
7266
}
7367

68+
.basic-box {
69+
background: pink;
70+
padding: 10px;
71+
}
7472

7573
.container-a {
7674
display: grid;
@@ -89,7 +87,6 @@ a:active {
8987
grid-row-start: 2;
9088
}
9189

92-
9390
.container-b {
9491
display: grid;
9592
grid-template-columns: 350px 1fr 150px;
@@ -108,7 +105,6 @@ a:active {
108105
padding: 5px 25px;
109106
}
110107

111-
112108
.container-c {
113109
display: grid;
114110
grid-template-columns: repeat(8, 1fr);
@@ -135,7 +131,6 @@ a:active {
135131
grid-row: 2 / 4;
136132
}
137133

138-
139134
.container-d {
140135
display: grid;
141136
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
@@ -162,11 +157,10 @@ a:active {
162157
text-align: center;
163158
}
164159

165-
166160
.container-f {
167161
display: grid;
168162
/* Shorthand: grid-template-rows / grid-template-columns */
169-
grid-template: 'side nav-l nav-r' 50px 'side main-l main-r' auto 'footer footer footer' 100px / 1fr 2fr 2fr;
163+
grid-template: "side nav-l nav-r" 50px "side main-l main-r" auto "footer footer footer" 100px / 1fr 2fr 2fr;
170164
}
171165

172166
.container-f__content-a {
@@ -177,7 +171,38 @@ a:active {
177171
grid-area: main-r;
178172
}
179173

174+
.container-g {
175+
display: grid;
176+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
177+
grid-gap: 5px;
178+
}
180179

180+
.container-h {
181+
/* first breakpoint */
182+
--w1: 800px;
183+
--n: 5;
184+
/* second breakpoint */
185+
--w2: 400px;
186+
--m: 2;
187+
188+
display: grid;
189+
grid-template-columns: repeat(
190+
auto-fill,
191+
minmax(
192+
clamp(
193+
clamp(
194+
100% / (var(--n) + 1) + 0.1%,
195+
(var(--w1) - 100vw) * 1000,
196+
100% / (var(--m) + 1) + 0.1%
197+
),
198+
(var(--w2) - 100vw) * 1000,
199+
100%
200+
),
201+
1fr
202+
)
203+
);
204+
gap: 5px;
205+
}
181206

182207
/* COMPONENTS ------------------------------------------------------------- */
183208

@@ -187,7 +212,6 @@ a:active {
187212
color: var(--minor-color);
188213
}
189214

190-
191215
/* UTILITY ---------------------------------------------------------------- */
192216

193217
/* STATE ------------------------------------------------------------------ */

0 commit comments

Comments
 (0)