[HTML/CSS] 8. Flex

Flex

flex는 레이아웃을 만들 수 있는 다양한 방법 중 가장 쉬운 방법이다.

'남는 공간을 어떻게 차지할 것인지'라고 이해하면 된다.

(공간의 배치)

 

flexbox는 flex container와 flex item으로 구성된다.

container는 item 들을 감싸는 역할이고

item은 각각의 요소이다.

 

.container{
	display:flex;
}

flex 레이아웃을 적용하기 위해선 컨테이너에

display: flex; 속성을 가장 먼저 설정해 줘야한다.

 

컨테이너에 display: flex;을 설정해야

아잉템에 다양한 flex 속성들을 이용할 수 있다.

 

배치 방향 설정하기

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

• row : 왼쪽 → 오른쪽
• column : 위 → 아래
• row-reverse : 오른쪽 → 왼쪽
• column-reverse : 아래 → 위

아이템들이 어떤 축으로 배열할 것인 설정하는 속성이다.

row가 기본값이며 reverse가 붙으면 역순으로 바뀌게 된다.

 

줄넘김 설정하기

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

​

• nowrap : 줄바꿈 ❌
• wrap : 줄바꿈 ⭕
• wrap-reverse : 역순으로 줄바꿈

 

수평축 방향 정렬하기

.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 : 아이템들의 양 끝에 균일한 간격을 줌

수직축 방향 정렬하기

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

​

• stretch : 수직축으로 늘어남
• flex-start : 가로배치일 경우 왼쪽, 세로배치일 경우 위로 정렬함
• flex-end : 가로배치일 경우 오른쪽, 세로배치일 경우 아래로 정렬함
• center : 가운데 정렬
• baseline : 아이템들 베이스라인 기준으로 정렬함