ee1e8abd87
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
95 lines
2.2 KiB
Markdown
95 lines
2.2 KiB
Markdown
---
|
|
id: 587d78ad367417b2b2512afb
|
|
title: Use the flex-shrink Property to Shrink Items
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
|
forumTopicId: 301113
|
|
dashedName: use-the-flex-shrink-property-to-shrink-items
|
|
---
|
|
|
|
# --description--
|
|
|
|
So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.
|
|
|
|
The first is the `flex-shrink` property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
|
|
|
|
The `flex-shrink` property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a `flex-shrink` value of `1` and the other has a `flex-shrink` value of `3`, the one with the value of `3` will shrink three times as much as the other.
|
|
|
|
# --instructions--
|
|
|
|
Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
|
|
|
|
# --hints--
|
|
|
|
The `#box-1` element should have the `flex-shrink` property set to a value of `1`.
|
|
|
|
```js
|
|
assert($('#box-1').css('flex-shrink') == '1');
|
|
```
|
|
|
|
The `#box-2` element should have the `flex-shrink` property set to a value of `2`.
|
|
|
|
```js
|
|
assert($('#box-2').css('flex-shrink') == '2');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<style>
|
|
#box-container {
|
|
display: flex;
|
|
height: 500px;
|
|
}
|
|
#box-1 {
|
|
background-color: dodgerblue;
|
|
width: 100%;
|
|
height: 200px;
|
|
|
|
}
|
|
|
|
#box-2 {
|
|
background-color: orangered;
|
|
width: 100%;
|
|
height: 200px;
|
|
|
|
}
|
|
</style>
|
|
|
|
<div id="box-container">
|
|
<div id="box-1"></div>
|
|
<div id="box-2"></div>
|
|
</div>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style>
|
|
#box-container {
|
|
display: flex;
|
|
height: 500px;
|
|
}
|
|
#box-1 {
|
|
background-color: dodgerblue;
|
|
width: 100%;
|
|
height: 200px;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
#box-2 {
|
|
background-color: orangered;
|
|
width: 100%;
|
|
height: 200px;
|
|
flex-shrink: 2;
|
|
}
|
|
</style>
|
|
|
|
<div id="box-container">
|
|
<div id="box-1"></div>
|
|
<div id="box-2"></div>
|
|
</div>
|
|
```
|