( ~ᐛ )~web制作勉強記録⑤~( ᐖ~ )

( ~ᐛ )~もくじ~( ᐖ~ )

・flex-wrapプロパティ

・flex-directionプロパティ

・background-imageプロパティ

    (+  background-positionプロパティ)

    (+  background-repeatプロパティ)

・flex-wrapプロパティ

フレックスアイテムの折り返しを指定するプロパティです( ᐛ )

【nowarap】…折り返し無し(デフォルト)

【wrap】…折り返し(下へ折り返す)

【wrap-reserve】…折り返し(上へ折り返す)

・flex-directionプロパティ

フレックスアイテムの処理する方向を指定するプロパティです( ᐛ )

文章の表示方向が左から右の横書きの場合

【row】…左詰め(左から右へ)

rowでのフレックスコンテナの方向はインライン要素と同じになります、なのでフレックスアイテムの方向が左から右になります( ᐛ )

【row-reserve】…右詰め(右から左へ)

(フレックスアイテムの並び順がrowでは1番左にあったものがrow-reserveになると1番右に反転します( ᐛ )それ以外のフレックスアイテムの位置も同様に反転します( ᐛ ))

【column】…上から下へ

columnでのフレックスコンテナの方向はブロック要素と同様です( ᐛ )

【column-reserve】下から上へ

フレックスアイテムの配置開始位置が一番下になり、順番に上へ配置されていきます( ᐛ )

・background-imageプロパティ

画像を指定し、それを背景にすることができるプロパティです( ᐛ )

▼background-positionプロパティ

背景にしたい画像がボックスより大きい場合…画像の表示したい範囲を指定して切り出す

背景にしたい画像がボックスより小さい場合…画像の表示したい範囲を指定して映し出す

▼ background-repeatプロパティ

背景画像がボックスより小さい場合に使用可能、ボックス内で画像を繰り返して表示することが出来るプロパティです( ᐛ )

(ボックス内の左上を起点に繰り返します)

【repeat】…縦方向と横方向に繰り返す

【repeat-x】…横方向にのみ繰り返す

【repeat-y】…縦方向にのみ繰り返す

【no-repeat】…繰り返しなし

【space】…ボックス内に収まるようにしつつ、感覚を開けて縦横に繰り返す

【round】…ボックス内に収まるようにしつつ、画像の横幅と高さを変えて繰り返す