【CSS/html】flexとtableの違い【似て非なる2つ】マンガでわかるホームページ作成ホームへ【CSS/html】flexとtableの違い【似て非なる2つ】2021年12月09日display:flexを使うと要素を横並びさせることができます。tableのtdも同様に横並びされます。横並びできるという点は似ているflexとtableの違いを見ていきましょう。【まとめ】flexとtableの違い目的flexはレイアウトを目的として利用します。tableは表(ひょう)を目的として利用します。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む改行の不可flexは子要素を改行させることができます。wrap」を指定します。tableはtdを改行できません。子要素の幅flexは子要素の幅の合計が親要素より小さいとき、小さいままです。親要素より大きくかつ改行が許可されていない場合は自動で調整され親要素と一致します。<div>flex4</div></div>tableは一行のtdの幅の合計がtableの幅と一致していなくても、自動で調整されて一致されます。</tr></table>子要素のmarginの指定可不可flexの子要素にはmarginを指定することができます。<div>flex4</div></div>tdにはmarginを指定できません。</tr></table>行の決まり方flexは子要素はすべて兄弟要素になっており、二行目以降を作るには子要素の幅によって決まります。<div>flex4</div></div>tableはhtmlによって決まります。trで行を指定し、tdでマス(列)を指定します。</tr></table>列の幅flexは折り返されて二行目になった子要素の幅を変更できます。そもそも「列」という認識がありません。style="width:100%;">flex4</div></div>tableは列単位で幅が統一されます。widthを変えても無視されます。</tr></table>CSSでの指定flexは「display:flex」の指定が必須です。htmlだけでは作成できません。tableはhtmlだけで形作ることができます。結論flexはレイアウトを組みたいときに利用しましょう。tableは表(ひょう)を扱うときに使いましょう。列の幅を統一させたいときも使えます。htmlだけで横並びできるため簡易的な横並びのときに使ってもいいでしょう。列の幅を自動で揃えたいとき簡易な横並べをしたいとき以上、flexとtableの違いでした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。