いざ学ばむ。

文系出身エンジニアの日々の学びを綴ります。

Flexboxについて

Flexboxとは?

→要素を横並びにすること

 

プロパティの主な種類

●justify-content: ✖️✖️; ・・・主軸方向→の配置を設定できる。

※space-between / space-aroundの違い

betweenは左右が両端に寄っているのに対し、aroundは両端の余白と要素間の余白が1対2となる。

●align-items:✖️✖️; ・・・交差軸方向↓の配置を設定する。

flex-direction:✖️✖️;・・・要素の方向や並び順を設定する

 

使い方

横並びにしたい要素の親要素にdisplay: flex;をかけた上でプロパティを記述する。