みなさん、こんにちは。どんぶラッコです。
HTML要素を横ならびにするときに display:flex
をよく使いますよね?
しかし、こんなことよくありませんか?
そんなあなたに贈るCSSをご紹介します!
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 は最初理解しづらいかもしれませんが、理解できた瞬間からものすごく強い味方になります!
頑張って勉強してみてください♪