CSS - Flex

핫다리·2023년 3월 13일
0

프론트

목록 보기
3/7

Flex는 레이아웃 배치 전용 기능으로 고안

적용 display: flex;

flex-direction: 배치 방향 설정

row (기본값): 아이템들이 행(가로) 방향으로 배치됩니다.
row-reverse: 아이템들이 역순으로 가로 배치됩니다.
column: 아이템들이 열(세로) 방향으로 배치됩니다.
column-reverse: 아이템들이 역순으로 세로 배치 됩니다.

flex-wrap: 줄넘김 처리 설정

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

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.

.container {
flex-flow: row wrap;
-> 아래의 두 줄을 줄여 쓴 것
flex-direction: row;
flex-wrap: wrap;
}

justify-content: 메인축 방향 정렬

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.

align-items: 수직축 방향 정렬

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

align-content 여러 줄 사이의 간격을 지정

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

align-self: 수직축으로 아이템 정렬

개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

flex-grow: 유연하게 늘리기

비율을 맞춰 나눈다
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

flex-shrink: 유연하게 줄이기

지정한 값 만큼 비율에 맞춰 줄어든다 수가 높을수록 잘줄어듬
.item:nth-child(1) { flex-shrink: 0; }
.item:nth-child(2) { flex-shrink: 1; }
.item:nth-child(3) { flex-shrink: 0; }
-> 2번이 제일 많이 줄어듬

order: 배치 순서

order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.
.red { order:-40; }

작동원리 보기
https://cdpn.io/pen/debug/adLPwv

연습하기
https://flexboxfroggy.com/#ko

profile
일단 만들고 본다

0개의 댓글