詳しい人求む！

flexboxで"flex-grow"と"flex-shrink"が混在している状態

解決済

質問者：boulevard5
質問日時：2020/08/08 13:29
回答数：1件

添付画像がどのような状態なのか理解できません。

flex-growはflexコンテナが大きく余白があった場合、複数のflexアイテムをどの割合で伸ばして余白を埋めるか？と言うように理解しています。

flex-shrinkはコンテナが大きくアイテムがコンテナに収まらない場合、各々のflexアイテムをどのくらいの割合で縮めるか？というように理解しています。

ここに出てくるflex-basisはコンテナ内のアイテムの基本的は幅だと解釈しています。

添付画像のＣＳＳ".box1"に”flex-grow:1;”が設定されていますがこれだけなら意味がわかります。box2やbox3は幅を変えずにbox1のみ幅を伸ばして余白を埋めたと考えられます。

が、ここに何のために ”flex-shrink:1;”が設定されているのかわかりません。
幅を伸ばしているのに、何のために"flex-shrink:1;"をつけて縮めようとしているのでしょうか？

flexプロパティの基本的な部分かと思いますが自分には理解できません。
分かる方いらっしゃいましたら初心者にわかるように教えてください。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2020/08/08 15:12

boulevard5さん

　･･････何のために ”flex-shrink:1;”が設定･････････････

flex-grow, flex-shrink の何れも、「伸縮・圧縮が可能な時に」伸縮・圧縮比率を配分します。

従って、全体で親要素に満たない場合は、伸縮係数が、
全体で親要素を超える場合は、圧縮係数が、
それぞれ適用されます。

ご参考に↓
http://www.tohoho-web.com/css/prop/flex-shrink.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ut8">
<style>
.wrap1 { display:flex; height:40px; border:1px #333 solid; width:500px; }
.wrap2 { display:flex; height:40px; border:1px #333 solid; width:250px; }
.item1{flex:1 0 90px; background:#fcc;} /* 伸長する圧縮せず幅指定 */
.item2{flex:0 0 40px; background:#cfc;} /* 伸長せず圧縮せず幅指定 */
.item3{flex:0 2 180px; background:#ccf;} /* 伸長せず圧縮する幅指定 */
</style>
</head>
<body>
<div class="wrap1">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
<div class="wrap2">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
</body>
</html>