Place Content

아이템 그룹 세로 정렬
: align-content

.container {
	align-content: stretch;
	align-content: start;
	align-content: center; 
	align-content: end; 
	align-content: space-between; 
	align-content: space-around; 
	align-content: space-evenly; 
}

1️⃣ stretch

A

B

C

D

E

F

G

H

I

2️⃣ start

A

B

C

D

E

F

G

H

I

3️⃣ center

A

B

C

D

E

F

G

H

I

4️⃣ end

A

B

C

D

E

F

G

H

I

5️⃣ space-between

A

B

C

D

E

F

G

H

I

6️⃣ space-around

A

B

C

D

E

F

G

H

I

7️⃣ space-evenly

A

B

C

D

E

F

G

H

I

 

아이템 그룹 가로 정렬
: justify-content

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

1️⃣ stretch

A

B

C

D

E

F

G

H

I

2️⃣ start

A

B

C

D

E

F

G

H

I

3️⃣ center

A

B

C

D

E

F

G

H

I

4️⃣ end

A

B

C

D

E

F

G

H

I

5️⃣ space-between

A

B

C

D

E

F

G

H

I

6️⃣ space-around

A

B

C

D

E

F

G

H

I

7️⃣ space-evenly

A

B

C

D

E

F

G

H

I

align-content + justify-content

: place-content

.container {
	place-content: align-content justify-content;
}