css温故知新——弾性箱

CSS 3フレキシブルボックス(Flexible Boxまたはflexbox)は、ページが異なる画面サイズおよびデバイスタイプに適応する必要がある場合に、要素が適切な動作を有することを保証するレイアウト方式である.
display:flex;ボックスの種類を指定します

フレックス親要素のプロパティ

flex-directionは、親コンテナ内の弾性サブ要素の位置を指定します.

flex-direction: row | row-reverse | column | column-reverse

juestify-content
フレキシブルボックスの主軸方向の位置合わせ、すなわちflex-directionで指定した方向を設定します.

justify-content: flex-start | flex-end | center | space-between | space-around

側軸方向の対と同じであり、異なる.空隙問題と呼ばれる主軸方向はサブエレメント配列方向であり,空隙はみんなで共有する必要があるがalign-itemsは側軸方向であり,位置ごとにサブエレメントが1つしかないため,空襲は引張に関与する
align-items
弾性ボックス要素の側面軸の位置合わせを設定します.

align-items: flex-start | flex-end | center | baseline | stretch

flex-wrap
flexレイアウトの重要なプロパティとして、構文は次のとおりです.

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content
align-contentプロパティはflex-wrapプロパティの動作を変更するために使用されます.align-itemsと同様ですが、弾性サブ要素の位置合わせではなく、各行の位置合わせを設定します.すなわち、flex-wrapが機能して改行が発生した場合、このプロパティは各行の位置合わせを制御します.
もちろん、flex-directionを変更すると、カラムの位置合わせになります.

弾性サブエレメントのプロパティ

order
並べ替えは、整数値で並べ替え順序を定義し、数値の小さいものが前に並びます.負の値を指定できます.
整列???
「margin」値を「auto」値に設定し、フレキシブルコンテナの残りのスペースを自動的に取得します.したがって、垂直方向marginの値を「auto」に設定すると、弾性サブエレメントを弾性容器の2つの上軸方向に完全に中心にすることができます.

パーフェクトセンター

は、余白が固定されながら、中

に位置する.

左/右

align-self
align-selfプロパティを使用して、弾性(サブ)要素自体のサイド軸(縦軸)方向の位置合わせを設定します.
flex
flexプロパティは、フレキシブルサブ要素が空間をどのように割り当てるかを指定します.

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]