grid flex

IE10ではみ出る要素が出た場合、要素に以下のコードを追加してあげる
-ms-flex:0 1 auto;

【親要素】 display: grid 横幅の指定 //1列目が100px2列目が50px grid-template-rows: 100px 50px; //1列目が100px 2列目が残り幅 grid-template-rows: 100px 1fr; grid-template-rows: auto auto; //高さの指定 grid-template-columns: 150px 1fr; //高さを中央にもってくる場合 align-items: center; justify-content: center; //子要素の指定方法 //rowは縦軸、columnは横軸を表します。 grid-row: 1 / 2; grid-column: 2 / 3; IE対応させるには 親要素 display: -ms-grid; -ms-grid-columns: 150px 1fr; -ms-grid-rows: auto auto; 子要素 -ms-grid-column: 1; //1は1列目のこと、2列目におくものは2をいれる

flex

flex-direction: column; /子要素をflexboxにより縦方向に揃える/ justify-content: center; /子要素をflexboxにより中央に配置する/ 高さ幅を中央に align-items: center; /子要素をflexboxにより中央に配置する/ 横幅を中央