目次
前回のおさらい
前回は、お弁当箱（要素div）の中におかず（子要素div）を入れることで、グループにしてまとめてデザインしたりしましたね。 前回の記事→divってなに？HTMLの”見えない箱”を優しく解説！
今回は、そのおかずたちの並べ方、位置の調整方法について、もっと詳しくみていきましょう！
display : flex ディスプレイフレックス
使うのはたったこれだけで、縦並びから横並びになります。
親要素のdivクラス名containerにCSSで display flex だけで、横並びになる
右に寄せたい
左右に離したい
ここで疑問？？？もし、div 要素が3つある場合は左右に分かれることはできないよなぁ〜
div要素を3つにしてみましょう！
デザート要素を作りました。
デザート要素にも色をつけました！
web表示させると…3つの要素が均等に横並びになりました。
中央に寄せる
中央に寄せる場合は justify content : center ; を使います
隙間をあけたい
要素と要素の間を少し開けたい場合は gap を使います
まとめ
・flexboxを使えば、お弁当の中身のように見た目を自由に配置できる。
・横並び・中央寄せ・隙間…なんでもできる。
コメント