CSS

グリッドで要素を揃える1

グリッド全体の位置を指定する方法について。

  • justify-content
  • align-content

justify-content

・グリッドでもflex-boxで使ったjustify-contentやalign-contentを使うことができます。使い方はflex-boxのときと同様で親要素に指定することができて要素を親要素に対してどの位置に移動するかを決めることができます。

フレックスボックスを作ってみよう

・justify-contentはグリット全体を列方向にどう揃えるかを指定するプロパティです。

・具体的に初期値では左右のどの位置に要素を持っていくかを指定でき、親要素に対して右揃え、左揃え、中央揃えなどを指定します。

・値をstart; とすると列の始点、つまり左揃えになります。end; とすると列の終点の右揃え、 center; とする中央揃え、 space-between; とすると余白を間に配置するかたちになります。

align-content

・グリット全体を行方向にどう揃えるかを指定するプロパティで初期値では上下に対しての指定になります。

・行方向の揃えで、 start; だと行の始点で上揃え、 end; で下揃え、 center; で中央揃え、 space-between;で余白を間に配置するような形になります。

-広告-

 

 






-CSS