【CSS】flexで横並びの子要素を均等幅にする方法マンガでわかるホームページ作成ホームへ【CSS】flexで横並びの子要素を均等幅にする方法2022年04月12日display:flexを指定した子要素は横並びになります。その幅はwidthを指定しない限り、内容量に応じて伸び縮みします。ここでは子要素の数に関わらずdisplay:flexで横並びの子要素を均等幅にする方法を解説します。【方法1】子にwidth:100%display:flexを指定した子要素にwidth:100%を指定すると均等幅になります。wrap」を指定しない限り、display:flexの子要素は改行しません。子要素の合計widthが親の幅より大きいとき、子要素の各widthの値に比率で再計算されます。width:100%を指定することで「子要素の合計widthが親の幅より大きい」という条件を満たし、かつ、子要素の比率を統一させ均等幅にできるというわけです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法2】子にflex:1display:flexを指定した子要素にflex:1を指定すると均等幅になります。<div>テキストテキストテキストテキスト</div></div>flexは「display:flex」の子要素に指定し、残りの幅に対して幅(または高さ)をどのようにするか指定するCSSです。一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。flexについて理解するのは難しく、また使う機会もコレ以外ないので「子要素にflex:1を指定すると均等幅になる」とだけ覚えてしまいましょう。【方法1】子にwidth:100%【方法2】子にflex:1以上、子要素の数に関わらずdisplay:flexで横並びの子要素を均等幅にする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。