tanuki_designのブログ

主にWebデザインの勉強内容をメモしています

【CSS】Flexboxを使ったボックス配置

ボックスを並べるということは、

WEBデザインの初心者にとって最初の関門であり、

この基礎ができないと、後々困る(と思っている)。

 

Flexboxを使ったデザインはかなり簡単なうえに、

たくさん種類もあって便利なのでここにメモ。

 

ルールとしては、

①親となるボックスに display: flex; を入力。

②適用したいボックスにFlexboxのコードを入力。

 ここでは justify-content: space-between; を適用。

 


See the Pen
EJZBzW
by tanuki_design (@ekocha)
on CodePen.


すごい便利。すごい簡単。

他の使い方等は、いつも以下のサイトにお世話になっていますので、ご参考までに。

 

coliss.com