🎨 CSS

Postion

static

relative

sticky

absolute:このブロックに基づいて

fixed:このブロックに基づいて

htmlに<div>要素として作成され、ブロックとして指定された値を表示する要素

display: inline // 인라인 요소로 바뀜
position: relative // 반응 없음
  
position: absolute  // display값이 블록으로 변경됨
position: fixed // display값이 블록으로 변경됨

位置が絶対の場合、表示はブロックになります

📌 FlexとGridはContainerとItemsで区切られています

Flex Container

display: flex, inline-flexcontainerのサブエレメントitemsコンテナのプロパティ

flex-direction:アイテムの位置合わせを指定する主軸

flex-wrap:itemを1行として表すか改行するかを指定します

justify-content:主軸に位置合わせ

align-items:交差軸に対応する位置合わせを指定し、1行制御

aling-content:交差軸に対応する位置合わせを指定し、2行以上を制御します.

Flex Items

Itemsのプロパティ

flex-grow:要素の増加幅パーセント

flex-shrink:要素の縮小率

flex-basis:エレメントのデフォルト幅を設定する

flexショートカットプロパティgrow, shrink, basis (0, 1, auto 생략 시: 0)

order:flex Itemsランダムに順序を変更し、正数と負数を使用して小数を前にします.

align-self(align-items):コンテナに指定できるalign-itemsのプロパティを単一に指定

Grid Containers

Flexは1次元アレイ用、Gridは2次元アレイ用
各軸に空白がある場合に使用できます.

justify-content:行軸に整列

align-content:列軸に整列

ツールバーの

normal(stretch)

start, center, end

sapce-between, around, evenly

Grid Containerのすべてのitmesのプロパティを一度に制御します.

justify-items:グリッド範囲内のセル内で、空白範囲内でセルを整列

align-itemsは

を提供しますが、属性値はsapceで始まります.

justify-self:個々のアイテムのプロパティを制御する

align-self

ツールバーの

normal(stretch)

start, center, end

Grid Items

rowとcolumnは各軸に番号が付いています.
順序1, 2, 3または逆順序-3, -2, -1フォーマット
開始と終了は、特定の行で指定できます.

grid-row-start:行軸から始まる番号

grid-row-end:行軸で終了する番号

grid-column-start:列軸から始まる番号

grid-column-end:列軸で終了する番号

ショートカットのプロパティ

grid-row: start/end

grid-column: start/end

ツールバーの

span:アイテムの位置から拡張され、デフォルト値は

です.

今日のエンディング

🖤 FlexとGridの様々な属性を学びました.
🖤 暗記するのは便利ですが、勉強を繰り返していると、自然と暗記してしまう一日ではないでしょうか…?🤔