【サンプルあり】 width を 保持したまま横並びにしたいときは？？ CSSの書き方を解説！

みなさん、こんにちは。どんぶラッコです。

HTML要素を横ならびにするときに display:flex をよく使いますよね？

しかし、こんなことよくありませんか？

名無しさん

↑の図のようなBoxを…

名無しさん

widthの長さを保持したまま横並びにしたい！！

名無しさん

早速 `display:flex` を記述してみたけど、画面に収まるように調整されてしまって、 `width` の値が調整されない…

そんなあなたに贈る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 は最初理解しづらいかもしれませんが、理解できた瞬間からものすごく強い味方になります！

頑張って勉強してみてください♪