flex-box(使い方の種類)

子要素を折り返したい時【flex-wrap】

flex-wrap: wrap;

これで親要素の幅を超えてしまった場合、折り返されます。

flex-wrap: wrap-reverse;

これで親要素の幅を超えてしまった場合、逆向きに折り返されます。

子要素の並ぶ向きを変えたい時【flex-direction】

flex-direction: column;

これで縦に配置できます。

flex-direction: column-reverse;

これで縦に配置でき、順番が逆になります。

 flex-direction: row-reverse;

これで横に配置でき、順番が逆になります。

水平方向の揃え方【justify-content】

justify-content: flex-end;

これで右揃えになります。

justify-content: center;

これで中央揃えになります。

justify-content: space-between;

これで均等に広がります。

justify-content: space-around;

これで両端の余白も含め均等に広がります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です