GRID
スケルトン
HTML
div class="box1"
div class="box1-1"
p・・・ /p div /div CSS .box1 { display: grid; grid-template-rows: 66px 1fr; grid-template-columns: 1fr 154px; gap: 15px 5px /* row-gap column-gap */; } .box1-1 { grid-row: 1/1; grid-column: 2/3; align-content: center; } align-content【縦方向】 start 上寄せ center 中央寄せ end 下寄せ stretch 軸の領域いっぱいにグリッドを広げる space-between 均等配置 / 上下の余白無し space-around 均等配置 / 上下の余白ありはアイテム間の半分 space-evenly 均等配置 / 上下の余白はアイテム間と同様 justify-content【横方向】 start 左寄せ center 中央寄せ end 右寄せ stretch 軸の領域いっぱいにグリッドを広げる space-between 均等配置 / 左右の余白無し space-around 均等配置 / 左右の余白ありはアイテム間の半分 space-evenly 均等配置 / 左右の余白はアイテム間と同様 align-self【縦方向】 start 上寄せ center 中央寄せ end 下寄せ stretch 軸の領域いっぱいにグリッドを広げる justify-self【横方向】 start 左寄せ center 中央寄せ end 右寄せ stretch 軸の領域いっぱいにグリッドを広げる HTML div class="box1" div class="box1-1" p・・・ /p /div /div CSS .box1 { display: flex; gap: 20px 10px /* row-gap column-gap */ } .box1-1 { flex-basis: 0 0 60%; align-self: flex-end; } flex-wrap: nowrap 折り返しなし(デフォルト)
wrap 上から下へ折り返し
justify-content: アイテムの水平方向の位置 flex-start 左揃え(デフォルト) flex-end 右揃え center 左右中央揃え space-between 両端を余白なしで配置、他は均等間隔で配置 space-around 両端を含めて、均等間隔で配置 align-items: アイテムの垂直方向の位置 stretch 上下の余白を埋めるように配置(デフォルト) flex-start 上揃えで配置 flex-end 下揃えで配置 center 上下中央揃えで配置 baseline ベースラインに合わせて配置 align-content: アイテムの行の垂直方向の位置 stretch 余白を埋めるように配置(デフォルト) flex-start 上揃えで配置 flex-end 下揃えで配置 center 上下中央揃えで配置 space-between 最上行と最下行を余白なしで配置、他は均等隔で配置 space-around 最上行と最下行を含めて均等間隔で配置 flex-grow: 伸び率 flex-grow:0 伸びなし(デフォルト) flex-grow:1 他要素との相対数値 flex-shrink【縮み率】 flex-shrink:0 伸びなし(デフォルト) flex-shrink:1 他要素との相対数値 flex-basis【ベースの幅】 flex-basis:auto 初期値 flex-basis:30% 80px、calc(100% - 20px)等々 伸び･率縮み率･ベースの一括指定 flex:0 0 50% 伸び無し、縮みなし、50% align-self【垂直方向】 auto 親要素のalign-itemsを使用(子要素指定優先) flex-start 上揃え flex-end 下揃え flex-center 中央揃え baselne ベースラインに合わせる stretch 上下の余白を埋めるように配置親要素
子要素
FLEX
スケルトン
親要素
子要素