1.flexレイアウト
flexレイアウト:flexレイアウトはフレキシブルレイアウトであり、ボックスモデルに最大の柔軟性を提供します.いずれのコンテナもflexレイアウトとして指定できます.ただし、flexレイアウトに設定すると、サブ要素のfloat,clear,vertical-alignプロパティが無効になります.
flexレイアウトを使用する要素をコンテナ、サブ要素、プロジェクトと呼びます.
レイアウト原理:親ボックスにflexプロパティを追加することで、サブボックスの位置と配置を制御します.
1.一般的な親属性(コンテナ)
flex-direction:主軸方向の設定 row:デフォルト値、水平方向左から右へ column:側軸、垂直方向上から下 row-reverse:水平方向右から左へ column-reverse:垂直方向下から上へ justify-content:主軸上のサブ要素の配列方法(使用前に主軸を決定する) flex-start:デフォルト、左揃え flex-end:右揃え center:主軸の中央にを配置する
space-around:残りの空間を分割 space-between:まず両側に縁を付けて、それから残りの空間を平らに分けます
flex-wrap:サブエレメントが改行されているかどうか nowrap:デフォルトでは改行しない wrap:改行 wrap-reverse:上へ改行し、最初の行は下のです.
align-items:側軸上の要素の配置方法(サブアイテムが単一(単一)の場合に使用) flex-start:を上から下に並べる
flex-end:を下から上へ並べる
center:中央揃え stretch:既定値では、項目の高さまたは高さがautoに設定されていない場合は、容器全体の高さを押し出す
align-content:側軸上の要素の配置方法(サブアイテムが複数の場合に使用)属性はalign-itemsに似ている flex-flow:彼はflex-directionとflex-wrapの複合属性で、1つ目はflex-directionで、2つ目はflex-wrap です.
1.2子属性（項目）
order:項目の並び順を定義し、数値が小さいほど前のに近づく.
align-self:現在のサブアイテムと他のサブアイテムの位置合わせが異なる flex-start flex-end center stretch flexプロパティは、flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティの略記です.デフォルト値は:0 1 auto;残りのスペースにサブアイテムを割り当てることを定義し、flexでの数を表す
2.gridレイアウト
gridレイアウト:コンテナにメッシュレイアウトを指定する
grid-template-columns:各列の列幅を定義し、をパーセントで表すことができます.
grid-template-rows:各行の行の高さを定義し、をパーセントで表すことができます.
//
.container{
display:grid;
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-rows:33.33% 33.33% 33.33%;
}
grid-row-gap:行間隔 grid-column-gap:列間隔 grid-gap:上の2つの属性の複合属性