CSS

【サンプルあり】 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 は最初理解しづらいかもしれませんが、理解できた瞬間からものすごく強い味方になります!

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

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です