Visitar URL original
flex-shrink controls · wesbos/JavaScript30@e6a39b7 · GitHub
Skip to content

Commit e6a39b7

Browse files
saitodissesaitodisse
committed
flex-shrink controls
1 parent 9f281e1 commit e6a39b7

3 files changed

Lines changed: 127 additions & 19 deletions

File tree

‎src/03 - CSS Variables/index-START-flexbox-sandbox.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
--flex-grow-item-3: 0;
99
--flex-grow-item-4: 0;
1010
--flex-grow-item-5: 0;
11+
--flex-shrink-item-1: 1;
12+
--flex-shrink-item-2: 1;
13+
--flex-shrink-item-3: 1;
14+
--flex-shrink-item-4: 1;
15+
--flex-shrink-item-5: 1;
1116
}
1217

1318
/*
@@ -98,22 +103,27 @@ h1, h2 {
98103
.item-1 {
99104
font-size: 140%;
100105
flex-grow: var(--flex-grow-item-1);
106+
flex-shrink: var(--flex-shrink-item-1);
101107
}
102108
.item-2 {
103109
font-size: 110%;
104110
flex-grow: var(--flex-grow-item-2);
111+
flex-shrink: var(--flex-shrink-item-2);
105112
}
106113
.item-3 {
107114
font-size: 120%;
108115
flex-grow: var(--flex-grow-item-3);
116+
flex-shrink: var(--flex-shrink-item-3);
109117
}
110118
.item-4 {
111119
font-size:130%;
112120
flex-grow: var(--flex-grow-item-4);
121+
flex-shrink: var(--flex-shrink-item-4);
113122
}
114123
.item-5 {
115124
font-size: 150%;
116125
flex-grow: var(--flex-grow-item-5);
126+
flex-shrink: var(--flex-shrink-item-5);
117127
}
118128

119129
@media (max-width: 450px) {

‎src/03 - CSS Variables/index-START-flexbox-sandbox.html‎

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,15 +203,40 @@ <h2>Scoped CSS Variables and JS</h2>
203203
</div>
204204
<button
205205
class="button-control"
206-
id="flex-grow-reset-0"
206+
id="flex-grow-reset-default"
207207
>
208-
reset all to 0
208+
default (flex-grow: 0)
209209
</button>
210210
<button
211211
class="button-control"
212212
id="flex-grow-reset-1"
213213
>
214-
reset all to 1
214+
flex-grow: 1
215+
</button>
216+
</div>
217+
218+
<div class="radio-variable">
219+
<div class="radio-list-title-container">
220+
flex-shrink
221+
<div
222+
class="info"
223+
title="Click on items to increase or decrease flex-shrink;
224+
- ctrl + right click: increase
225+
- ctrl + left click: decrease">
226+
?
227+
</div>
228+
</div>
229+
<button
230+
class="button-control"
231+
id="flex-shrink-reset-default"
232+
>
233+
default (flex-shrink: 1)
234+
</button>
235+
<button
236+
class="button-control"
237+
id="flex-shrink-reset-0"
238+
>
239+
flex-shrink: 0
215240
</button>
216241
</div>
217242

@@ -222,31 +247,56 @@ <h2>Scoped CSS Variables and JS</h2>
222247
id="item-1"
223248
class="item item-1">
224249
1
225-
<p>flex-grow: 0</p>
250+
<p class="flexGrow">
251+
flex-grow: 0
252+
</p>
253+
<p class="flexShrink">
254+
flex-shrink: 1
255+
</p>
226256
</div>
227257
<div
228258
id="item-2"
229259
class="item item-2">
230260
2
231-
<p>flex-grow: 0</p>
261+
<p class="flexGrow">
262+
flex-grow: 0
263+
</p>
264+
<p class="flexShrink">
265+
flex-shrink: 1
266+
</p>
232267
</div>
233268
<div
234269
id="item-3"
235270
class="item item-3">
236271
3
237-
<p>flex-grow: 0</p>
272+
<p class="flexGrow">
273+
flex-grow: 0
274+
</p>
275+
<p class="flexShrink">
276+
flex-shrink: 1
277+
</p>
238278
</div>
239279
<div
240280
id="item-4"
241281
class="item item-4">
242282
4
243-
<p>flex-grow: 0</p>
283+
<p class="flexGrow">
284+
flex-grow: 0
285+
</p>
286+
<p class="flexShrink">
287+
flex-shrink: 1
288+
</p>
244289
</div>
245290
<div
246291
id="item-5"
247292
class="item item-5">
248293
5
249-
<p>flex-grow: 0</p>
294+
<p class="flexGrow">
295+
flex-grow: 0
296+
</p>
297+
<p class="flexShrink">
298+
flex-shrink: 1
299+
</p>
250300
</div>
251301
</div>
252302

‎src/03 - CSS Variables/index-START-flexbox-sandbox.js‎

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,37 @@ elements.forEach(ele => {
1111
let items = document.querySelectorAll('.item')
1212
function _handleClick (ev) {
1313
ev.preventDefault();
14-
const currentFlexGrow = Number(document.documentElement.style.getPropertyValue(`--flex-grow-${this.id}`)) || 0
15-
let newFlexGrowValue = currentFlexGrow
16-
if (ev.button === 0 && newFlexGrowValue > 0) {
17-
newFlexGrowValue--;
18-
} else if (ev.button === 2) {
19-
newFlexGrowValue++;
14+
15+
if (!ev.shiftKey) {
16+
const currentFlexGrow = Number(document.documentElement.style.getPropertyValue(`--flex-grow-${this.id}`)) || 0
17+
let newFlexGrowValue = currentFlexGrow
18+
if (ev.button === 0 && newFlexGrowValue > 0) {
19+
newFlexGrowValue--;
20+
} else if (ev.button === 2) {
21+
newFlexGrowValue++;
22+
}
23+
document.documentElement.style.setProperty(`--flex-grow-${this.id}`, newFlexGrowValue)
24+
this.querySelector('p.flexGrow').textContent = `flex-grow: ${newFlexGrowValue}`
25+
} else {
26+
const currentFlexShrink = Number(document.documentElement.style.getPropertyValue(`--flex-shrink-${this.id}`)) || 0
27+
let newFlexShrinkValue = currentFlexShrink
28+
if (ev.button === 0 && newFlexShrinkValue > 0) {
29+
newFlexShrinkValue--;
30+
} else if (ev.button === 2) {
31+
newFlexShrinkValue++;
32+
}
33+
document.documentElement.style.setProperty(`--flex-shrink-${this.id}`, newFlexShrinkValue)
34+
this.querySelector('p.flexShrink').textContent = `flex-shrink: ${newFlexShrinkValue}`
2035
}
21-
document.documentElement.style.setProperty(`--flex-grow-${this.id}`, newFlexGrowValue)
22-
this.querySelector('p').textContent = `flex-grow: ${newFlexGrowValue}`
36+
2337
}
2438

2539
items.forEach(ele => {
2640
ele.addEventListener('click', _handleClick)
2741
ele.addEventListener('contextmenu', _handleClick)
2842
})
2943

30-
document.querySelector('#flex-grow-reset-0').addEventListener('click', () => {
44+
document.querySelector('#flex-grow-reset-default').addEventListener('click', () => {
3145
// clear css variables
3246
document.documentElement.style.removeProperty('--flex-grow-item-1')
3347
document.documentElement.style.removeProperty('--flex-grow-item-2')
@@ -36,7 +50,7 @@ document.querySelector('#flex-grow-reset-0').addEventListener('click', () => {
3650
document.documentElement.style.removeProperty('--flex-grow-item-5')
3751

3852
// reset flex-grow texts
39-
document.querySelectorAll('.item p').forEach((p) => {
53+
document.querySelectorAll('.item p.flexGrow').forEach((p) => {
4054
p.textContent = 'flex-grow: 0'
4155
})
4256
})
@@ -57,8 +71,42 @@ document.querySelector('#flex-grow-reset-1').addEventListener('click', () => {
5771
document.documentElement.style.setProperty('--flex-grow-item-5', 1)
5872

5973
// reset flex-grow texts
60-
document.querySelectorAll('.item p').forEach((p) => {
74+
document.querySelectorAll('.item p.flexGrow').forEach((p) => {
6175
p.textContent = 'flex-grow: 1'
6276
})
6377
})
6478

79+
document.querySelector('#flex-shrink-reset-default').addEventListener('click', () => {
80+
// clear css variables
81+
document.documentElement.style.removeProperty('--flex-shrink-item-1')
82+
document.documentElement.style.removeProperty('--flex-shrink-item-2')
83+
document.documentElement.style.removeProperty('--flex-shrink-item-3')
84+
document.documentElement.style.removeProperty('--flex-shrink-item-4')
85+
document.documentElement.style.removeProperty('--flex-shrink-item-5')
86+
87+
// reset flex-shrink texts
88+
document.querySelectorAll('.item p.flexShrink').forEach((p) => {
89+
p.textContent = 'flex-shrink: 1'
90+
})
91+
})
92+
93+
document.querySelector('#flex-shrink-reset-0').addEventListener('click', () => {
94+
// clear css variables
95+
document.documentElement.style.removeProperty('--flex-shrink-item-1')
96+
document.documentElement.style.removeProperty('--flex-shrink-item-2')
97+
document.documentElement.style.removeProperty('--flex-shrink-item-3')
98+
document.documentElement.style.removeProperty('--flex-shrink-item-4')
99+
document.documentElement.style.removeProperty('--flex-shrink-item-5')
100+
101+
// set all flex-shrink to 1
102+
document.documentElement.style.setProperty('--flex-shrink-item-1', 0)
103+
document.documentElement.style.setProperty('--flex-shrink-item-2', 0)
104+
document.documentElement.style.setProperty('--flex-shrink-item-3', 0)
105+
document.documentElement.style.setProperty('--flex-shrink-item-4', 0)
106+
document.documentElement.style.setProperty('--flex-shrink-item-5', 0)
107+
108+
// reset flex-shrink texts
109+
document.querySelectorAll('.item p.flexShrink').forEach((p) => {
110+
p.textContent = 'flex-shrink: 0'
111+
})
112+
})

0 commit comments

Comments
 (0)