flex 해버렸지 뭐얌💵

display: flex;를 돕는 속성들

기본적으로 display: flex;를 설정하면 contents들을 가로로 정렬하는 속성을 가지고 있다.
개구리 잡기

justify-content

가로정렬 변경하기

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬.
• center: 요소들을 컨테이너의 가운데로 정렬.
• space-between: 요소들 사이에 동일한 간격을 둔다.
• space-around: 요소들 주위에 동일한 간격을 둔다.
• space-evenly: 요소들 사이와 주위에 동일한 간격을 둔다.

align-items

세로정렬 변경하기

• flex-start: 요소들을 컨테이너의 꼭대기로 정렬.
• flex-end: 요소들을 컨테이너의 바닥으로 정렬.
• center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬.
• stretch: 요소들을 컨테이너에 맞도록 늘림.

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정.

• row: 요소들을 텍스트 방향과 동일하게 정렬.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬.
• column: 요소들을 위에서 아래로 정렬.
• column-reverse: 요소들을 아래에서 위로 정렬.

💡tip! row-reverse 또는 column-reverse를 사용하면 요소들의 start와 end의 순서도 바뀜. 💡tip! flex의 방향이 column인 경우 justify-content 방향이 세로로, align-items 방향이 가로로 바뀜.

order

row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않을 때, 각 요소의 순서를 변경하기 위해 사용.
order의 기본 값은 0, 양수(오른쪽으로 숫자만큼 이동)나 음수(왼쪽으로 숫자만큼 이동)로 바꿀 수 있다.
보통 하나의 요소에 클래스를 주어 옮긴다.

align-self

개별 요소에 적용할 수 있는 속성. align-items가 사용하는 값들을 인자로 받는다.

flex-wrap

• nowrap: 모든 요소들을 한 줄에 정렬.
• wrap: 요소들을 여러 줄에 걸쳐 정렬.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬.

flex-flow

flex-direction과 flex-wrap이 자주 같이 쓰여 flex-flow로 이를 대신할 수 있다.

• row wrap: 요소들을 가로선 상의 여러줄에 걸쳐 정렬.
• column wrap: 요소들을 세로선 상의 여러줄에 걸쳐 정렬.
• row nowrap: 요소들을 가로선 한 줄에 정렬.
• column nowrap: 요소들을 세로선 한 줄에 정렬.

align-content

여러 줄 사이의 간격 지정

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬.
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬.
• center: 여러 줄들을 세로선 상의 가운데에 정렬.
• space-between: 여러 줄들 사이에 동일한 간격을 둠.
• space-around: 여러 줄들 주위에 동일한 간격을 둠.
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림.

💡tip! 한 줄만 있을 경우, align-content는 적용되지 않는다.