2.0 KiB
2.0 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78ae367417b2b2512afc | flex-grow プロパティを使用してアイテムを拡大する | 0 | https://scrimba.com/p/pVaDAv/c2p78cg | 301111 | use-the-flex-grow-property-to-expand-items |
--description--
flex-shrink
の反対は flex-grow
プロパティです。 flex-shrink
はコンテナが縮小するときのアイテムのサイズを制御することを思い出してください。 flex-grow
プロパティは、親コンテナが拡大されるときのアイテムのサイズを制御します。
前回のチャレンジと似たような例として、もしあるアイテムが flex-grow
の値として 1
を持ち、他のアイテムが flex-grow
の値として 3
を持つ場合、3
の値を持つアイテムがもう一方に比べて三倍拡大します。
--instructions--
CSS プロパティ flex-grow
を #box-1
と #box-2
の両方に追加してください。 #box-1
に 1
の値、#box-2
に 2
の値を設定してください。
--hints--
#box-1
要素の flex-grow
プロパティを 1
に設定してください。
assert($('#box-1').css('flex-grow') == '1');
#box-2
要素の flex-grow
プロパティを 2
に設定してください。
assert($('#box-2').css('flex-grow') == '2');
--seed--
--seed-contents--
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
--solutions--
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-grow: 2;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>