CSS - Flex

Flex 컨테이너에 적용하는 속성들

display : flex;

.container {
	display : flex;
}

: 내용물만큼의 크기를 차지한다.

 

배치 방향 설정

.container {
	flex-dirction: row;
	flex-dirction: column;
	flex-dirction: row-reverse;
	flex-dirction: column-reverse;
}

row : 아이템들이 행 방향으로 배치

row-reverse : 아이템들이 역순으로 행 배치

column : 아이템들이 열 방향 배치

column : 아이템들이 역순으로 열 배치

 

줄넘김 처리 설정

.container {
	flex-wrap: nowrap;
	flex-wrap: wrap;
	flex-wrap: wrap-reverse;
}

nowrap : 넘치면 빠져나감

wrap : 넘치면 줄 바꿈

wrap-reverse : 줄바꿈하고 아이템들 역순 배치

 

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있음

.container {
	flex-flow: row wrap;
}

 

메인축 방향 정렬 justify-content

.container {
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
	justify-content: space-evenly;
}

flex-start : 아이템들을 시작점으로 정렬

flex-end : 아이템들을 끝점 정렬

center : 아이템들을 가운데 정렬

space-between : 아이템들의 사이에 균일한 간격

space-around : 아이템들의 둘레에 균일한 간격

space-evenly : 아이템들의 사이와 양 끝에 균일한 간격

 

수직축 방향 정렬 align-items

.container {
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center; 
	align-items: baseline;
}

stretch : 아이템들이 수직방향으로 끝까지 늘어남

flex-start : 아이템들을 시작점으로 정렬

               flex-direction이 row일 때 위, column일 때는 왼쪽

flex-end : 아이템들을 끝으로 정렬

               flex-direction이 row일 때 아래, column일 때는 오른쪽

center : 아이템들을 가운데 정렬

baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬

 

여러 행 정렬 align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직 방향 정렬 결정 속성

.container {
	flex-wrap: wrap;

	align-content: stretch;
	align-content: flex-start;
	align-content: flex-end;
	align-content: center;
	align-content: space-between;
	align-content: space-around;
	align-content: space-evenly;
}

 

---

Flex 아이템에 적용하는 속성들

유연한 박스의 기본영역 flex-basis

Flex 아이템의 기본 크기를 설정한다. ( flex-direction이 row일 때는 너비, column일 때는 높이 )

.item {
	flex-basis: 100px;
}

: 사이즈가 넘어가도 그대로 유지

.item {
	width: 100px;
}

: 사이즈를 넘어가면 줄바꿈

* 둘 다 설정하면 width를 적용

 

유연하게 늘리기 flex-grow

.item {
	flex-grow: 1;
}

: 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.

 

유연하게 줄이기 flex-shrink

// 1일 때 
.item {
	flex-basis: 150px;
	flex-shrink: 1; /*기본값*/
}

// 0일 때
.container {
	display: flex;
}
.item:nth-child(1) {
	flex-shrink: 0;
	width: 100px;
}
.item:nth-child(2) {
	flex-grow: 1;
}

1일 때 : flex-basis보다 작아질 수 있음

0일 때 : flex-basis보다 작아지지 않음

 

flex

: flex-grow, flex-shrink, flex-basis의 축약형 속성

.item {
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}

 

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

.item {
	align-self: auto;
	align-self: stretch;    
	align-self: flex-start;
	align-self: flex-end;
	align-self: center;
	align-self: baseline;
}

align-self는 align-items보다 우선권 -> 전체 설정보다 각각의 개별 설정을 우선한다는 것

 

배치 순서 order

: 각 아이템들의 "시각적" 나열 순서를 결정하는 속성

작은 숫자일수록 먼저 배치

.item:nth-child(1) { order: 3;} /* A */
.item:nth-child(2) { order: 1;} /* B */
.item:nth-child(3) { order: 2;} /* C */

B C A

 

z-index

: Z축 정렬, 숫자가 클수록 위로 올라감

( position에서의 z-index랑 똑같이 생각 )

.item:nth-child(2) {
	z-index: 1;
	transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템들보다 위로 올라온다 */

 

출처 : https://studiomeal.com/archives/197