[HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편

Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원합니다.

 

이번 글에서는 플렉스 구조에서 플렉스 아이템에 대해서 설명하겠습니다.

플렉스 구조와 플렉스 컨테이너에 대한 이야기는 다음 글을 참고하시길 바랍니다.

[HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너

 

---

플렉스 아이템은 ① order, ②  flex-basis, ③ flex-shrink, ④ flex-grow, ⑤ flex, ⑥ align-self, 총 6가지 속성을 설명하겠습니다. 

 

① order, 아이템들의 순서

order 속성은 컨테이너 안에서 아이템들의 시각적인 나열 순서를 결정합니다. 숫자 값을 넣어야 하며, Default 값은 0입니다. 작은 숫자일 수록 먼저 배치됩니다. 

html 코드에서 작성된 순서와는 상관없이 order 속성에 지정된 순서로 화면에 출력됩니다. 단, html 코드 자체가 바뀌는 것은 아니기 때문에, 스크린 리더를 사용해서 화면을 읽으면 순서가 바뀌지 않은 것으로 나오기 때문에 주의해야 합니다.

<div class="flex-container_order">
  <div style="order: 3">1</div>
  <div>2</div> <!-- Default 값 = 0 -->
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

 

1

2

3

4

 

② flex-basis, 아이템의 기본 크기

flex-basis 속성은 아이템의 크기의 기본값을 설정합니다.

만약 flex-direction이 row일 때는 width를, column일 때는 height을 설정하게 됩니다. 그렇다면 width랑 height를 설정하는 것과flex-basis의 차이는 무엇일까요?

  <div style="flex-basis: 100px;">OXOXOXO</div>
  <div style="width: 100px">OXOXOXO</div>

 

OXOXOXO

OXOXOXO

flex-basis로 설정한 크기보다 내용이 더 크다면, flex-basis를 무시하고 내용에 맞게 아이템이 커집니다. 하지만 width로 설정한 크기보다 내용이 더 크다면, 내용이 아이템 밖으로 삐져 나오게 됩니다. 

(만약 flex-basis와 width 둘 다 설정되어 있다면, flex-basis가 우선 순위를 갖게 됩니다)

 

③ flex-grow, 상대적 크기 확장

flex-grow 속성은 아이템들이 크기가 확장될 때, 커지는 비율을 정합니다. 숫자 값을 넣어야 하는데, 0보다 큰 값이 들어가 있는 아이템들은 각자 설정된 비율만큼의 여백을 채우게 됩니다. Default 값은 0으로, 아무 값도 설정해주지 않으면 커지지 않고 정해진 크기를 유지합니다. 

아이템들이 커지는 비율은 아이템 자체의 크기로 계산되는 것이 아니라, flex-basis를 제외한 여백의 크기로 계산됩니다.

<div class="flex-container_grow">
  <div style="flex-grow: 1">AAAA</div>
  <div>BB</div>
  <div style="flex-grow: 2">CCC</div> 
  <div style="flex-grow: 4">D</div>
</div>

flex-grow 비율은 flex-basis를 제외한 여백으로 계산

 

④ flex-shrink, 상대적 크기 축소

flex-shrink 속성은 flex-grow와는 반대로 아이템들이 축소될 때, 작아지는 비율을 정합니다. 숫자 값만을 사용할 수 있고, 서로 정해진 비율만큼 여백의 크기가 줄어들게 됩니다. Default 값이 1이기 때문에 값을 설정해주지 않아도 아이템이 flex-basis보다 줄어들 수 있습니다.

flex-shrink 속성 값이 0이면 크기가 변하지 않아 네비게이션 바, 고정된 컬럼(광고) 등, 고정된 크기의 폭을 필요로 할 때 활용할 수 있겠습니다. 

 

⑤ flex

flex 속성은 flex-grow, flex-shrink, flex-basis 순서로 세 가지 속성을 한번에 설정할 수 있는 속성입니다.

<div style="flex: 0 0 200px">1</div>
<div style="flex: 1 0 40%">2</div>
<div style="flex: 1 1 0">3</div>

 

세 가지 속성을 응용하면 새로운 방식으로 아이템들의 크기를 정할 수 있습니다. 만약 flex-basis에 해당하는 값을 모두 0으로 설정한다면, 아이템들의 기본 크기가 0으로 컨테이너의 공간을 flex-grow가 지정한 비율대로 채우게 됩니다. flex-grow는 여백들의 비율이지만, 기본 크기가 모두 0이기 때문에 "아이템 전체 크기 = 아이템의 여백 크기"가 되기 때문입니다.

 

⑥ align-self

align-self 속성은 컨테이너 편에서 나온 align-items 속성의 아이템 편입니다. align-items는 컨테이너 안에 있는 모든 아이템들에 적용되었다면, align-self 속성은 명칭에서 보이듯 self, 해당하는 아이템 하나만 적용됩니다. 둘 다 설정되어 있다면, align-self 속성이 우선하게 됩니다. 

align-self 속성으로 들어갈 수 있는 값은 align-items와 동일합니다. 

ex) stretch, center, flex-start, flex-end