プログラミングのCSSについて横並びの方法を考えてみます。まずはやってみるんだ！「flexbox」！悩みを解消してくれます。大丈夫です！
CSS 横並びにする
CSSって便利な上に色々な表現ができて、可能性は無限だなぁって思いませんか？
そんな中でも最強の「flexbox」について書いていきます。
CSSの機能の中に横並びの方法がいくつかあります。最初は「float」を記述していました。
しかしfloatが効かないことがしばしばあり、効かない理由もよくわかりませんでした。
floatは横幅が大事で、100%を超えるとレイアウトが崩れたりと、とにかくきちんと理解していなければ使えません。
当然、paddingやmarginも考慮して考えなければならないので結構パニックになります。
flexboxと出会った
しかし、色々調べていくと、ついに出会ったのです。それは「flexbox」です。
正式には「Flexible Box Layout Module 」の略です。気持ちいぐらい簡単なレイアウトが楽しめます。
「display: flex;」とCSSに指定するだけでOKです。それだけではありません。横並び、縦並び、並べる順番、アイテムの間隔など自由自在です。ホントに素晴らしい！
コメント
[…] 2023年1月9日HTML・CSS […]
[…] 関連記事HTMLとCSSの記事 横並びってどうする？HTMLとCSSの記事 スペース挿入ってどういれるんだっけ？ […]