CSS 用語まとめ

この解説文は独自にまとめたもので、正確性や網羅性を保証するものではありません。

アルファベット編

flexbox(フレックスボックス)で設定した複数行になったflexコンテナ(親要素)内のflexアイテム(子要素)のクロス軸(Y軸、列)の揃え位置を指定する。

flex-start: flexコンテナX軸の起点から、行間の余白がなく、上端に配置。

flex-end: flexコンテナX軸の終点から、行間の余白がなく、下端に配置。

center: flexコンテナX軸に中央に、行間の余白がなく、上下中央に配置。

space-between: flexコンテナX軸に幅に対して余白を等間隔に配置。

space-around: flexコンテナX軸に幅に対して起点・終点にも余白を等間隔に配置。

stretch: flexコンテナX軸に幅に対して均等の幅に伸縮。

親要素名 {
  display: flex;
　align-content: center:
}

▲ flexとalign-contentを親要素に指定したら子要素の配置を編集指定できる。

align-itemsとは、交差軸上(Y軸・列)に上・中央・下と配置合わせを指定できます。主軸上(X軸・行)の配置合わせ指定は、justify-content(ジャスティファイ・コンテント)となります。

flex-start(フレックス・スタート)とは、flexコンテナの交差軸の上端左側から右側に配置します。

flex-end(フレックス・エンド)とは、flexコンテナの交差軸の下端左側から右側に配置される。

center(センター)とは、flexコンテナの交差軸の中央左側から右側に配置される。

baseline(ベースライン)とは、flexコンテナの交差軸の左側からテキストの下部で揃え配置される。

stretch(ストレッチ)とは、親要素の高さ:height(ハイト)に合わせて伸縮して配置される。

フレックスコンテナ(外枠)とは、flexbox(フレックスボックス)を使ってテキストコンテンツを配置する区域のこと。

フレックスアイテム(内枠)とは、フレックスコンテナの直下の子要素のこと。

フレックスボックスの2つの軸の関係とは、主軸を交差軸があります。

主軸とは、flex-direction(フレックス・ディレクション)でrowやrow-reverseの場合は、インライン要素の並びで横に伸びる方向の軸(今回はX軸・行)であり、その主軸に垂直に交わる軸(今回はY軸・列で)のことを交差軸という。

またcolumnやcolumn-reverseの主軸(今回はY軸・列)は、ブロック要素が上から下に並び伸びる方向です。

親要素にdisplay: flexでフレックスアイテムの配置方向を指定する。

row(ロウ)とは、X軸・行で左から右方向にフレックスアイテムが(1・2・3)と配置される。

row-reverse(ロウ・リバース)とは、rowの逆の向きで右から左にフレックスアイテムが(1・2・3)と配置される。

column(カラム)とは、Y軸・列で上から下方向にフレックスアイテムが(1・2・3)と配置される。

column-reverse(カラム・リバース)とは、columnの逆向きで上からフレックスアイテムが(3・2・1)と配置される。

親要素名 {
  display: flex;
　flex-direction: row:
}

▲ flexとflex-directionを親要素に指定したら子要素の配置を指定できる。

justify-content(ジャスティファイ・コンテント)は、主軸上(X軸・行)に左・中央・右と配置合わせを指定できます。交差軸上(Y軸・列)の配置合わせ指定は、align-items(アライン・アイテムズ)となります。

flex-start(フレックス・スタート)とは、flexコンテナの主軸の上端左側に配置します。

flex-end(フレックス・エンド)とは、flexコンテナの主軸の上端右側に配置される。

center(センター)とは、flexコンテナの主軸の左右中央に配置される。

space-between(スペース・ビトゥイーン)とは、flexコンテナの主軸の横幅に対して余白が等間隔に配置される。

space-around(スペース・アラウンド)とは、space-betweenのflexアイテム前後にも余白が等間隔に配置される。

/* 1行でも複数行でも、コメントアウトされます。*/