<CSS 기초> 08. Flex Box

 

 이번 장에서 알아볼 내용은 드디어 Flex box 이다. 지금까지 배웠던 박스 타입들은 위치를 잡기가 매우 힘들고 번거로웠지만 Flex box가 있으면 매우 편해진다.

 

 Flex box는 크게 4단계의 step을 생각하자. 첫 번째는 선언이다. 플렉스박스를 쓰겠다고 선언하는 것이다. 두 번째는 가로로 정렬할 것인지 세로로 정렬할 것인지를 결정하는 것이다. 세 번째는 반드시 한줄로 나타낼 것인지 사이즈가 모자라면 다음 라인으로 보낼 것인지 결정하는 것이다. 반드시 한줄로 나타낸다면 사이즈가 자동으로 조절될 것 이다. 마지막 네 번째는 예쁘게 사용하는 것이다.

 

 이제 단계별로 하나씩 알아보자.

 

1. 선언

 - 플렉스 박스를 사용하려면 부모에게 display값을 flex 또는 inline-flex로 주면된다. 

display : flex ;

 

2. 가로 or 세로

 - 다음은 요소들은 가로로 배치할 것인지 세로로 배치할 것인지 결정하는 것이다. 

 flex-direction : row ;

 - 위와 같이 사용하며 row는 행 방향으로 정렬하겠다는 의미이다. colum을 이용하여 세로 정렬도 가능하다. 그 외에 row-reverse, colum-reverse 도 사용 가능하며 별도의 선언이 없으면 기본값은 row이다.

 

  - 방향 설정 시 염두하여야 할 것이 있다. 바로 축이다. row로 방향을 결정하게되면 위 그림과 같이 주축은 가로가 되며 크로스 축은 세로가 되며 방향은 아래이다. 이는 뒷부분에 나올 정렬 부분에서 중요하므로 반드시 기억해야한다. 

 - colum으로 설정시 주축은 세로이고 크로스축은 가로이다 방향은 위 그림과 같다.

 - reverse의 경우에도 각각의 크로스축의 방향은 위와 같다.

 

3. 줄바꿈 속성

 - flex-wrap 속성을 통해 자동줄바꿈을 할지 결정할 수 있다.

flex-wrap : nowrap;

 - 위와 같이 선언시 줄바꿈을 하지 않겠다는 의미이며 자식의 사이즈를 줄여서라도 한 줄로 변경시킨다.

 - wrap 을 사용하면 자동으로 사이즈에 맞춰 줄바꿈이 이루어 지며, flex-wrap 선언이 없을 때 기본 값은 nowrap이다.

 

4. 정렬

* Main-Axis

 - 주 축에서 정렬을 위한 속성은 justify-content이다.

 justify-content : flex-start ;

 - 위와 같이 선언하면 flex 시작부분부터 정렬한다는 의미이다. 만약 방향을 row로 했다면 왼쪽 정렬처럼 보일 것이다. flex-end를 통해 끝부분부터 정렬도 가능하며, center 을 주면 가운데 정렬이 된다.

 - 위의 세가지 외에도 space-between과 space-around 를 이용해 간격과 관련된 정렬도 가능하다.

 

위 : space-between / 아래 : space-around

 

* Cross-Axis

 - cross축에서는 두가지의 속성이 있다. align-items와 align-content가 있으며 전자는 하나의 라인이 기준이라면 후자는 여러개의 라인일 경우에 사용이 가능하다.

 align-items : center ;

 - 위와 같이 사용이 가능하며 이는 크로스축을 기준으로 가운데 정렬이라는 의미이다. flex-start 와 flex-end도 사용 가능하다. 그러나 이는 하나의 라인이 기준인데 이를 설명하기 위해 아래 그림을 보자.

 

 - 위는 wrap이기 때문에 하늘색 상자가 밑으로 내려와서 하나의 라인이 더 생긴 경우이다. 이 때 위쪽 라인과 아래쪽 라인 각각에게 크로스축이 생겼다고 보면 된다. 그로인해 align-items를 center로 하면 각각의 크로스 축의 가운데에 위치하는 것이다.

 

 - 그렇다면 align-content를 건들면 어떻게 될까?

 - align-content : center 을 하면 위와 같이 통째로 큰 라인을 기준으로 가운데 정렬이 된다.

 - 여기에서는 flex-start, flex-end, center, space-between, space-around 까지 사용이 가능하다.

 

5. 참고

 - flex box에는 또 편리한 기능이 있다. 바로 order 기능이다.

 - order은 자식요소에게 order : 1 ; 과 같이 줄 수 있으며 order 값을 통해 순서를 마음대로 변경할 수 있다.

 - flex box는 상황에 맞춰 크기가 줄어들거나 늘어날 수 있다. 이 때 flex-shrink 속성과 flex-grow 속성을 이용하자.

 - flex-shrink : 상황에 맞춰 줄어들어도 된다는 의미로 사용한다. 양의 정수를 사용하여 배율을 정하며, 0의 값을 주면 절대 줄어 들지 않는다.

 - flex-grow : 상황에 맞춰 늘어나도 된다는 의미로 양의 정수를 사용한다.

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

CSS Flex(Flexible Box) 완벽 가이드