[CSS] Flexbox 정리

 

CSS에서 flexbox는 box나 item들을 행/열로 유연하게 배치시킬 수 있게 해주는 속성들이다.

 

 

---

 

Flexbox의 속성을 보기 전에 먼저 반드시 알아야 할 중요 개념 2가지가 있다.

 

 

1. container와 item 

 

flexbox를 구현하기 위한 속성 값들은 크게

• container(=감싸고 있는 큰 박스)에 적용되는 속성 값과

• item(=큰 박스 안에 있는 작은 박스들)들에 적용되는 속성값이 있다.

 

 

2. main axis와 cross axis

 

flexbox에는 main axis(=중심축)과 cross axis(=반대축)이 있다.

 

• container안에 item이 왼쪽에서 오른쪽으로 정렬되어 있는 경우에는 수평축이 중심축이 되고, 수직축이 반대축이 된다.

 

• container안에 item이 위쪽에서 아래쪽으로 정렬되어 있는 경우에는 수직축이 중심축이 되고, 수평축이 반대축이 된다.

 

 

---

위 2가지를 유념하여 속성 값들을 살펴보자.

 

container에 적용되는 속성 값

 

• display  : flex로 값을 줘야 해당 박스를 flexbox로 설정한다.
  
  ex) display: flex;

 

• flex-direction
  
  - row (기본값) : 이 박스 안의 item들을 왼쪽에서 오른쪽으로 차곡차곡 정렬 (수평축이 중심축)
  
  - row-reverse : 오른쪽에서 왼쪽으로 정렬 (수평축이 중심축)
  
  - column : 위에서 아래로 정렬 (수직축이 중심축)- column-reverse : 아래에서 위로 정렬 (수직축이 중심축)
  
  ex) flex-direction: column;

 

• flex-wrap 
  - nowrap (기본값) : 한 줄에 item들이 꽉 차게 되면 item 크기가 작아지면서 계속한 줄에 존재
  
  - wrap : 한 줄에 item들이 꽉 차게 되면 item 크기는 유지하면서 자동으로 다음 줄로 넘어감
  
  ex) flex-wrap: wrap;

 

• flex-flow  : flex-direction과 flex-wrap을 한꺼번에 지정하는 속성.
  
  ex) flex-flow: row wrap;

 

• justify-content  : 중심축을 기준으로 item들을 어떻게 배치할 건지에 대한 설정
  
  - flex-start : 중심축에 따라 왼쪽 정렬 또는 위쪽 정렬 (위에 붙게 배치)
  
  - flex-end : 중심축에 따라 오른쪽 정렬 또는 아래쪽 정렬 (아래에 붙게 배치). flex-direction속성의 row-reverse와 column-reverse와 다른 점은 flex-end는 item들의 순서를 유지한다는 것. 즉, 위치만 바뀜
  
  - center : 가운데 정렬
  
  - space-around : 각각의 item 바깥에 빈 공간를 넣어 배치
  
  - space-evenly : 각각의 item에 같은 크기의 space를 넣어 배치 (가장 바깥쪽 item과 container의 사이와 item과 item 사이의 크기가 같음)
  
  - space-between : 가장 바깥쪽 item과 container의 사이에는 빈 공간이 없고 item들 사이에만 공간을 넣어 배치 
  
  ex) justify-content: space-evenly;

 

• align-content : 반대축을 기준으로 item들을 어떻게 배치할 건지에 대한 설정.
  
  justify-content에 들어가는 속성값들을 같은 효과로 사용할 수 있다.
  
  ex) align-content: space-between;

 

• align-items  : 반대축을 기준으로 contain 내부 정렬 상태를 지정
  
  - center : 수직 중앙 또는 수평 중앙 정렬
  
  - baseline : 각 item안의 text를 한 줄에 맞게 정렬
  
  ex) align-items: baseline;

 

 

 

 

item에 적용되는 속성 값

 

• flex-grow : 화면이 커질 때 그 줄에서 해당 item의 크기가 차지하는 비율을 지정. 지정하지 않을 경우 크기가 커지지 않음
  
  ex) flex-grow: 1;

 

• flex-shrink : 화면이 작아질 때 그 줄에서 해당 item의 크기가 차지하는 비율을 지정 (큰 숫자일수록 더 작게 줄어듦)
  
  ex) flex-shrink: 2;

 

• flex-basis : item이 공간을 어떻게 차지하는지 더 세부적으로 설정해 줄 수 있는 속성 값.
  
  화면이 커질 때, 작아질 때 그대로일 때 모두 같은 비율을 유지.
  
  ex) flex-basis: 60%;

 

• flex : flex-grow, flex-shrink, flex-basis를 한 번에 지정할 수 있는 속성 값.
  
  ex) flex: 2 2 auto;

 

• align-self : 개별 item을 원하는대로 정렬시킬 수 있다.
  
  ex) align-self: center;

 

 

---

 

 

** HTML / CSS 테스트하기 좋은 사이트

jsbin.com/

JS Bin