CSS 쉽게 배우기 | 플렉스 박스 (Flex-Box)

CSS flex-box (플렉스 박스)로 반응형 디자인을 만들어 보자

안녕하세요

이번 편에서는 flex-box (플렉스 박스)를 알아볼 건데요

디스플레 이방 식중 하나로 반응형 디자인에서 많이 사용되는 방식입니다

이 디스플레이 방식의 장점은 지정된 요소들이 브라우저의 크기에 따라서 자동으로 재배치된다는 점입니다

플렉스 박스를 사용하려면 적용하고 싶은 요소들, 그리고 그 요소들을 하나로 묶어둘 컨테이너가 필요합니다

그럼 하나하나씩 살펴볼까요?

display: flex

먼저 컨테이너의 디스플레이를 플렉스로 바꿔줍니다

그러면 이 컨테이너 안의 요소들을 여러 플렉스 속성을 사용해서 정렬할 수 있습니다

*중요! 플렉스 컨테이너 안의 모든 요소에 적용되지 않습니다. 컨테이너의 자식 요소들한테만 적용됩니다*

.container {
    display: flex;
}

이렇게 컨테이너 디스플레이를 플렉스로 바꿔주면 시작입니다

 

 

 

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

이 속성은 플렉스의 방향을 설정할 때 사용하고 컨테이너 레벨에서 사용합니다

플렉스 방향은 열, 열-거꾸로, 행, 행-거꾸로 이렇게 4방향이 있습니다

*열 방향은 기본 설정입니다*

 

 

 

flex-wrap: nowrap | wrap | wrap-reverse

이 속성은 플렉스 컨테이너 안에 있는 내용들을 자동 줄 바꿈 할지를 설정합니다

기본 설정은 줄 바꿈 없음이고, 줄 바꿈 또는 거꾸로 줄 바꿈으로 설정할 수 있습니다

컨테이너 레벨에서 사용합니다

 

 

 

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

이 속성은 요소들의 가로 정렬 설정에 사용합니다

정렬 방식은 플렉스-시작 | 플렉스-끝 | 가운데 | 사이 간격 | 주위 간격 | 같은 간격 이렇게 있습니다

기본 설정은 플렉스-시작입니다

컨테이너 레벨에서 사용합니다

 

 

 

 

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

이 속성은 요소들을 세로로 정렬할 때 사용합니다

정렬 방식은 플렉스-시작 | 플렉스-끝 | 가운데 | 늘리기 | 기준선 이 있습니다

기본 설정은 플렉스-시작입니다

컨테이너 레벨에서 사용합니다

*요소에 높이가 주어져 있으면 늘리기 방식은 적용되지 않습니다*

 

기준선 방식은 플렉스 아이템, 즉 컨테이너의 자식 요소들의 내용의 기준선에 맞춰서 정렬합니다

각 플렉스 아이템 내용의 사이즈가 같으면 플렉스-시작 방식과 별 다를 바 없지만

각 플렉스 아이템 내용의 사이즈가 다르면 그 차이점을 볼 수 있습니다

기준선 정렬의 위치는 열에서 가장 높이가 긴 항목입니다

 

 

 

order: <number>

이 속성은 플렉스 아이템의 정렬 순서를 정할 때 사용합니다

기본 설정은 HTML 코드 순서이지만

이 속성을 사용해서 그 순서를 바꿀 수 있습니다

이 속성의 값은 숫자로 0 은 기본 순서를 뜻합니다

플렉스 아이템 레벨에서 사용합니다

 

 

 

 

align-self: stretch | flex-start | flex-end | center | baseline

이 속성은 align-items의 속성을 무효화시키고 플렉스 아이템의 정렬을 다시 설정할 때 사용합니다

기본 설정은 늘리기로 돼있고, 플렉스 아이템에 높이가 정해져 있지 않을 때만 적용됩니다

플렉스 아이템 레벨에서 사용합니다

 

 

 

 

flex-flow: <direction> <wrap>

이 속성은 flex-direction과 flex-wrap을 한 번에 설정할 수 있는 단축 속성입니다

<direction>은 flex-direction에 사용되는 값과 같으며

<wrap>은 flex-wrap에 사용되는 값과 같습니다

 

 

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

이 속성은 align-items과 비슷하게 작동하지만

다른 점은 이 속성은 flex-wrap의 행동을 변경합니다

컨테이너의 내용이 wrap 된 경우에만 적용된 걸 볼 수 있습니다

컨테이너 레벨에서 사용합니다

 

 

 

 

flex-grow: <number>

이 속성은 플렉스 아이템이 얼마만큼의 자리를 차지해야 하는지를 설정할 때 사용합니다

플렉스 아이템들은 기본적으로 본연의 크기를 유지합니다

그래서 컨테이너를 플렉스 박스로 해도 컨테이너에 빈 공간이 생기죠

이 빈 공간을 없애려면 모든 플렉스 아이템에 flex-grow: 1을 설정하면 됩니다

이렇게 하면 모든 플렉스 아이템들이 같은 크기로 컨테이너를 빈 공간 없이 채우게 되죠

특정한 플렉스 아이템에 1보다 큰 수를 부여하면 그 아이템은 다른 아이템들보다 그만큼 커지게 됩니다

눈치채셨듯이 플렉스 아이템 레벨에서 사용합니다

 

 

 

 

flex-shrink: <number>

이 속성은 flex-grow와는 반대로 플렉스 아이템의 축소 크기를 설정할 때 사용합니다

숫자가 클수록 다른 아이템보다 더 축소합니다

기본 설정으로 모든 플렉스 아이템들은 flex-shirnk:1로 설정돼 있습니다

0은 축소 없음으로 본연의 크기를 유지합니다

플렉스 아이템 레벨에서 사용합니다

*플렉스 아이템이 아닌 요소에는 적용하지 않습니다*

 

 

 

 

flex-basis: <unit value>

이 속성은 플렉스 아이템의 기본 크기를 정할 때 사용합니다

flex-direction이 row일 땐 넓이를, column일 땐 높이를 조절합니다

flex-basis와 width가 같이 사용될 경우에는 flex-basis의 값이 적용됩니다

일반 사이즈 단위를 사용할 수 있습니다

플렉스 아이템 레벨에서 사용합니다

 

 

 

 

flex: none | <flex-grow> <flex-shrink> <flex-basis>

이 속성은 flex-grow, flex-shrink, flex-basis를 한 번에 설정할 수 있는 단축 속성입니다

여기서 flex-shrink와 flex-basis는 옵션입니다

 

 

 

 

플렉스 박스를 잘 활용하면 이미지 갤러리 같은 디자인도 간단하게 만들 수 있습니다

 

 

 

 

이렇게 플렉스 박스를 알아봤습니다

알아두면 정말 유용하게 사용할 수 있는 속성들이고

반응형 디자인을 만들 때 필요한 코드도 많이 줄일 수 있습니다

 

물론 플렉스 박스만으로 모든 완벽한 반응형 디자인을 만들 수 있는 건 아니지만

초기 디자인이나 간단한 걸 만들 때 사용하기 좋은 방법입니다

 

 

 

수고하셨습니다

 

끝!