css

position(default: static)

relative: 원래있는 자리에서 이동
absolute: 내 아이템 안에 담겨있는 가까이있는 박스 안에서 이동
fixed: 웹페이지 전체 상에서 이동
sticky: 스크롤이 이동되어도 원래 있던 자리에 고정됨

flexbox

display

flex-direction:

row: 왼쪽에서 오른쪽 방향으로 가로정렬,
row-reverse: 오른쪽->왼쪽으로 가로 정렬,
column: 위에서 아래로 세로정렬,
column-reverse: 아래에서 위로 세로정렬

flex-wrap:

nowrap(default): 한줄에 빼곡하게 붙어있음
wrap: 아이템들이 한줄에 꽉차게 되면 다음 라인으로 넘어감
wrap-reverse: 반대로

justify-content: (중심축에서 아이템을 어떻게 배치할지 결정)

flex-start(default): 처음부터 왼쪽 오른쪽, 위에서 아래로
flex-end: 오른쪽에서 왼쪽으로(아이템의 순서는 유지)
center: 중앙으로 이동
space-around: 아이템 중심으로 간격을 줌
space-evenly: 아이템 사이를 똑같은 간격으로
space-between: 화면 양옆을 똑같은 간격으로 아이템 사이가 벌어짐

align-items:

center: 아이템들을 수직적으로 중심에 둘때
baseline: 아이템의 텍스트가 균등하게 정렬
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

align-content

order(default: 0)

1, 2, 3 아이템 순서를 정할 수 있음

flex-grow(default: 0)

컨테이너 사이즈를 화면에 꽉차게 배율 지정할 수 있음

flex-shrink(default: 0)

컨테이너가 작아졌을때 어떻게 행동할지 지정

flex-basis:

퍼센트로 배율을 지정할 수 있음

align-self:

컨테이너를 벗어나서 해당 아이템만 지정하고 싶을때 사용

height: 100%-> 부모 컨테이너 대비, 100vh-> 해당컨테이너 전체크기