みなさん、こんにちは。どんぶラッコです。
HTML要素を横ならびにするときに display:flex
をよく使いますよね?
しかし、こんなことよくありませんか?



そんなあなたに贈るCSSをご紹介します!
・マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!
・レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!
・JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!
flex-shrink
を子要素に指定せよ!
それは flex-shrink
です。実際のコード例とともにみてみましょう。
See the Pen flex-shrink 記述例 by cha1ra (@cha1ra) on CodePen.
HTML
<div class="flex">
<div class="box box1">
Box1
</div>
<div class="box">
Box2
</div>
<div class="box">
Box3
</div>
</div>
CSS
.flex{
display:flex;
}
.box{
background-color: #ddd;
padding: 8px;
margin: 8px;
width:400px;
flex-shrink: 0; /* 今回のポイント! */
}
構造としては .flex
クラスが適用されてるdivに display:flex
を適用し、内包される各 <div>
要素については .box
要素を適用しています。
ここでポイントになるのは、 .box
要素内の flex-shrink
。こいつが display:flex
をかけたときに要素を縮めてくれちゃう要因です。
なので、flex-shrink:0
と記述することで “要素を縮めないでね〜”という指示になります。結果、widthの値が保持される、というわけですね!
flex は最初理解しづらいかもしれませんが、理解できた瞬間からものすごく強い味方になります!
頑張って勉強してみてください♪