Flexbox - item 속성

flex items 속성

컨테이너의 자식들, 즉 flex item들이 갖는 주요한 속성은 이렇다. 부모인 컨테이너의 주요 속성은 전 포스팅 에서 다루었다.

• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

flex-grow

플렉스 그로우는 필요한 경우 아이템이 늘어날 수 있는 능력을 말한다. 여태까지 컨테이너 속성만 정의했을 때는 아이템들이 정렬되는 방향은 바꿀 수 있었지만, 아이템 자체가 늘어나지는 않았었다. 그러나 이 속성을 아이템에 주게 되면 아이템 자체가 늘어나서 컨테이너를 꽉 채울 수 있게 된다. 그리고 grow에 주는 값에 따라서 그 비율이 바뀌는 것이다.

flex-grow의 디폴트 값은 0이다. 즉 늘어나지 않는다는 뜻이다. 그런데 모든 아이템에게 flex-grow: 1; 이라는 속성을 주면 아래처럼 컨테이너를 채운다. (아래 예시들은 전부 flex-direction: row;인 컨테이너를 가정한다.)

flex-grow에 주는 값은 비율을 의미한다. 만약 nth-child() 로 각각의 아이템에게 1, 2, 3 을 준다면 1:2:3 의 비율로 꽉차게 될 것이다.

그런데 여기서 조금 주의해야 할 부분이 있다. 위의 그림이 좀 미묘해서 티가 안날 수도 있겠지만, 사실 아이템의 너비는 지금 1:1:1이 아니다. flex-grow가 늘어나는 비율을 지정하는 것은 맞지만, 아이템 전체 너비의 비율을 맞춰주는 것이 아니라 아이템의 컨텐츠 부분을 제외하고 난 여백 너비 의 비율을 맞춰주는 것이다. 그렇다면 이 아이템의 전체 너비를 맞추어 주려면 어떻게 해야 할까?

flex-basis

flex-basis 는 여백이 분배되기 전에 아이템의 디폴트 크기를 정한다. flex-basis의 디폴트 값은 auto이다. 이 값이 auto이면 flex-basis는 아이템 콘텐츠 너비를 값으로 갖는 셈이고, 아이템의 여백 공간(콘텐츠를 제외한 노란 박스)은 flex-grow 값을 기준으로 분배된다. 이 속성에 0을 주면 콘텐츠 여백을 고려하지 않게 되고 아이템의 전체 너비가 flex-grow 너비로 조정된다.

flex-shrink

flex-shrink는 grow와 반대로 아이템이 줄어들 수 있는 능력을 의미한다. 이 속성이 0이면 이 아이템을 줄어들 수 없다는 의미이고, 축소되면 콘텐츠가 깨지는 경우에 이를 방지하기 위해 쓸 수 있다.

flex

위에서 모든 아이템의 너비 비율을 똑같이 주려면, 모든 아이템에 flex-grow: 1을 주고 flex-basis: 0 을 주어야 한다고 했다. 그런데 이렇게 되면 속성을 두 개 써줘야 하므로 번거롭다. flex는 위에 언급한 속성들을 동시에 쓸 수 있게 해준다. 총 3가지 value를 가질 수 있는데 첫 번째가 flex-grow, 두 번째가 flex-shrink, 세 번째가 flex-basis이다.

예를 들어 flex: 0 0 200px; 이면 flex-grow: 0, flex-shrink: 0, flex-basis: 200px이라는 의미로, 아이템은 늘어나지도 줄어들 수도 없으며 200px의 고정 크기를 가진다는 의미이다.

만약 flex: 1; 이라고 하면 이는 flex-grow: 1, flex-shrink: 1, flex-basis: 0 이라는 의미로(크롬 개발자도구에서 element 속성의 flex를 펼쳐보면 다 나온다) 아이템 전체 너비가 동등하게 나누어지게 된다.

align-self

align-self는 컨테이너 속성에서 정해진 정렬(alignment) 값을 개별 아이템에서 오버라이딩할 수 있도록 한다. 즉 컨테이너에서 align-items: flex-start로 주어서 모두 위쪽으로 정렬한 상태여도, 한 아이템에게 align-self: flex-end를 줘서 그 아이템만 밑으로 정렬하게 할 수 있다는 뜻이다.

참고

css-tricks