2022年02月01日

width指定が効かない？Flexboxは子要素の横幅指定がポイント

みなさんこんにちは。
クリエイターの白石です。

今回の内容はデザイン＆HTML/CSSの中級者向けです。
普段デザインやコーディングをしていて何か上手くいかないな～
となりやすい部分についてご紹介・解説します。
——————————————————————

■CSSで「dispplay:flex」を指定して要素を横並びにしたとき、
『widthで横幅指定したのに言うこと聞いてくれない！』
ということはありませんか？

それは『子要素の幅指定をしていないことが原因』です。

Flexboxは「dispplay:flex」と指定するだけで子要素を横並びに表示してくれますよね。
そして各子要素の横幅もブラウザがいい感じに調整してくれます。
とっても簡単で便利です！

でもこの「いい感じに調整してくれる機能」が固定値の指定に影響してくるのです…

<>
■１つの子要素にだけwidthで横幅指定をして、他の子要素にはしていない

この場合、横幅指定されていない子要素に対して
ブラウザがいい感じに調整してくれようとして…
固定値で指定されている要素の幅も伸び縮みさせてしまいます。

その結果『あれ、width指定が効かない？なんで？』となってしまうのです。

■解決方法

[HTML]

[CSS]? 対応方法①：すべての子要素に横幅を指定する

.item01 { width: 30%; }
.item02 { width: 70%; } or

.item01 { width: 200px; }
.item02 { width: 500px; } etc…

※レスポンシ対応、リキッドレイアウトで実現したいのが
『固定値＋可変（親要素の幅いっぱいにする）』という表示です。
※これを解決するには下のような対応が必要です。

↓↓↓
——————————————————————

[CSS]? 対応方法②：可変要素にflex:1;を指定する

.item01 { width: 200px; }
.item02 { flex: 1; }

Flexboxには親要素に対して子要素がどれくらい伸び縮みするかを指定する
プロパティがあります。

・flex-grow … 子要素の伸びる比率
・flex-shrink … 子要素の縮む比率
・flex-basis … 子要素のベースとなる幅の指定

flexは、flex-grow、flex-shrink、flex-basisを一括指定するプロパティで、
子要素を親要素の領域に収めるために、どのように伸長・収縮させるかを指定します。

flex: 1;は、flex-grow: 1;と指定されたのと同じです。

flex-growは親要素の横幅に余った空間があったとき、
その子要素にどれくらい割り当てるかを指定できます。

なので、子要素が２つしかないこの状況では、
余った空間いっぱいにこの（flex: 1指定された）子要素の幅をとってくれるという訳です。

——————————————————————

細かいことも説明しましたが、実際は
横並びのレイアウトで、「固定値＋可変」にしたいときは
『可変したい子要素に「flex: 1; 」を付ける！』
と覚えておくだけでＯＫです。

よく聞かれることが多いのでピックアップしました。
同じところで困っている方のお役に立てたら嬉しいです。

筆者が書いたこちらの記事も人気です。合わせてどうぞ

#画面サイズが変わっても、画像を伸び縮みさせずに表示させる方法

その他人気の記事