[CSS] Flex 레이아웃

# Flex 레이아웃을 만들기 위한 기본 구조

 

[html]

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

 

[css]

.container {
	display: flex;
	/* display: inline-flex; */
}

 

# flex-direction : 아이템들이 배치되는 축의 방향을 결정하는 속성

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

row (기본값)

아이템을 행(가로) 방향으로 배치

row-reverse

아이템을 역순으로 가로 배치

column

아이템을 열(세로) 방향으로 배치됩니다.

column-reverse

아이템을 역순으로 세로 배치 됩니다.

 

# flex-wrap : 컨테이너가 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성

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

nowrap (기본값)

줄바꿈을 하지 않고 공간을 벗어나면 보이지 않는다

wrap

줄바꿈을 한다 float이나 inline-block으로 배치한 요소와 유사하다

wrap-reverse

줄바꿈하는데 아이템을 역순으로 배치한다

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다
flex-direction, flex-wrap의 순으로 한 칸 떼고 쓰면 된다

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: 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-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위

flex-end

아이템들을 끝점으로 정렬한다
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래

center

아이템들을 가운데로 정렬한다

space-between

아이템들의 “사이(between)”에 균일한 간격을 만든다

space-around

아이템들의 “둘레(around)”에 균일한 간격을 만든다

space-evenly

아이템들의 사이와 양 끝에 균일한 간격을 만든다

 

# align-items : 수직축 방향으로 아이템을들 정렬하는 속성 ( justify-content와 수직 방향의 정렬 )

 

.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

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

 

# 아래와 같은 방법으로 간단하게 아이템을 가운데에 위치시킬 수 있다

justify-content: center;
align-item: center;

 

# 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; */
}

 

참고 : https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자