はじめに 今回は要素を綺麗に配置するときに、大変役立つFlexboxの使い方について紹介します! ここでは、要素 (アイテム) が入っている箱のことをコンテナと呼んで説明します。 YouTube動画 動画で学びたい方はこちらもどうぞ! 【YouTube動画】 HTML/CSSのFlexboxについて詳細解説! これでどんなデザインでも自由自在!【Flexbox入門】 GitHub コードのサンプルをGitHubにアップロードしてます! Pathや一部コードを修正する必要がありますが、ローカルで試してみたい方はこちらもどうぞ! https://github.com/yassun-youtube/html-flexbox-samples コンテナ内の全要素の配置 コンテナに入っている要素の並びを一括で指定したい場合は、flex-direction, justify-content, align
![HTML/CSS初心者は必見! どんなデザインでも自由自在にできるFlexbox入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bbfced9867d0b9ade039e1f902d18bd3e5530748/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SFRNTCUyRkNTUyVFNSU4OCU5RCVFNSVCRiU4MyVFOCU4MCU4NSVFMyU4MSVBRiVFNSVCRiU4NSVFOCVBNiU4QiVFRiVCQyU4MSUyMCVFMyU4MSVBOSVFMyU4MiU5MyVFMyU4MSVBQSVFMyU4MyU4NyVFMyU4MiVCNiVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MSVBNyVFMyU4MiU4MiVFOCU4NyVBQSVFNyU5NCVCMSVFOCU4NyVBQSVFNSU5QyVBOCVFMyU4MSVBQiVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QkZsZXhib3glRTUlODUlQTUlRTklOTYlODAmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYyMGYwM2M1YTEzOTBjNDlhNDcwYWUxOTFiMDg2Yjhm%26mark-x%3D142%26mark-y%3D100%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB5YXNzdW4teW91dHViZSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODFjYTdhMjJhMTE5MjUyMzQ5NDgwMDE0MDUwMDY3ZDE%26blend-x%3D142%26blend-y%3D504%26blend-mode%3Dnormal%26s%3D6e1b1e48bd0855fdc6a2628810b71960)