ihigoro https://blog.hatena.ne.jp/ihigoro/ The 復習 https://ienshu.hatenadiary.jp/ ★CSS Flexbox 「display: flex;」で、要素を横並びにできます 「リストや画像を横並びにしたい」 「要素間の余白を均等にして、はみ出たら折り返したい」 「表示する順番を逆からにしたい」 「画像とテキストを左右交互に配置したい」 Flexboxの性質 以下の性質がCSSの記述によって柔軟に変更できます 横並びで表示される 親要素に合わせて横幅・高さが伸縮する HTMLの記述が表示順に影響しない Flexboxの使い方 親要素に「display: flex;」を指定することで、子要素が横並びになります <ul class="flex-container"> <li class="fle… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fienshu.hatenadiary.jp%2Fentry%2F2025%2F10%2F10%2F000000_1" title="Flexboxで横並び - The 復習" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/p/pbhfq/20221120/20221120024917.jpg Hatena Blog https://hatena.blog 2025-10-10 00:00:00 rich https://ienshu.hatenadiary.jp/entry/2025/10/10/000000_1 1.0 100%