flex의 컨테이너

컨테이너에 넣을 수 있는 속성들을 알아봅시다.

---

앞 시간엔 부모 엘리먼트의 display 값에 flex를 선언한 것까지 했습니다. 컨테이너가 무엇인지 기억나시나요? 부모 엘리먼트를 앞으로 컨테이너라고 지칭하기로 했었습니다. flex를 선언하면 기본적으로는 이런 모습으로 보입니다.

가로 방향이며 한 줄로 정렬되었습니다.

flex는 다른 값을 주지 않는다면 일단 한 줄안에 다 넣습니다. 그리고 가로로 아이템들을 정렬합니다. 속성으로 얘기하자면 flex-direction은 row값이 적용되어 있고, flex-wrap은 nowrap인 것이죠.

flex-direction이란 무엇일까요? 말 그대로 플렉스의 방향을 정해주는 속성입니다. 플렉스에서는 기본 방향을 주축(main-axis)이라고 합니다. 

row는 그림처럼 나타날 것이고, column을 주면 어떻게 될까요 ?

column값을 주었습니다.

 

아이템들이 세로로 줄 세워진게 보이시나요? 

flex-direction: row | row-reverse | column | column-reverse;

flex-direction은 위와 같이 4개의 값이 올 수 있습니다. reverse값이 붙으면 아이템의 순서가 바뀐다는 것을 알아주세요.

flex-direction의 값이 주축을 정한다고 했었죠 ?

값에 따라 주축과 교차축이 어떻게 형성되는지 보이시나요?

row나 row-reverse값을 주면 주축은 가로가 되고 교차축은 세로가 됩니다. 그 반대로 column이나 column-reverse를 값으로 주면 세로가 주축이 되고, 가로가 교차축이 됩니다. 이게 왜 중요하냐고요?

당연히 안 쪽의 아이템을 옮기기 위해서입니다. 

justify-content는 아이템을 주축 방향으로 옮겨주고, align-items는 아이템을 교차축 방향으로 옮겨 줍니다.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

align-items: flex-start | flex-end | center | stretch | baseline;

각각 올 수 있는 값들을 기억해주세요!

그리고 맨 위에서 플렉스는 일단 한 줄에 다 넣는다고 했습니다. 그렇다면 안 쪽의 아이템들이 많아지면 어떻게 될까요? 기본적으로 한 줄에 다 넣기 때문에 아이템이 점점 작아지며 한 줄에 가득차게 됩니다. 그럴때는 한 줄이 아니라 아이템들을 여러 줄에 정렬하는게 낫겠죠?

flex-wrap은 여러 줄을 사용할지 한 줄만 사용할지를 정하는 속성입니다.

flex-wrap: nowrap | wrap | wrap-reverse; 

 

그리고 여러 줄에 아이템들이 생기고 아이템들에 속성값을 줄 때 align-items로 아이템들을 옮기려고 한다면, 여러 줄에 각각마다 속성값이 적용되서 이상하게 보이실겁니다. 그래서 여러 줄이 되었을 때 한번에 아이템들을 제어할 수 있도록 만든 것이 align-content 속성입니다.

align-content: flex-start | flex-end | center | stretch | space-between | space-around;

이 많은 속성을 컨테이너에서 적용할 수 있습니다. 신기하지 않나요? 다음 시간에는 item에게 적용할 수 있는 속성들을 알아보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.