7분만에 알아보는 CSS flexbox
flexbox 이제는 끝내보자
flexbox?
flexbox는 요소의 배치를 1차원적으로 효과적으로 할 수 있게 도와주는 css의 기능입니다. 말이 조금 어렵죠? 실전 예제를 통해서 언제 사용하는지 하나씩 보도록 하겠습니다.
flexbox를 구성하는 요소 — container, item
flexbox에서는 크게 두 가지 개념이 사용됩니다.
첫번째는 위 그림의 점선처럼 ITEM1, ITEM2, ITEM3를 감싸는 container가 있습니다.
container는 flexbox를 사용하기 위해서는 필수이며, 여러 속성을 통해서 내부 아이템의 정렬이나 속성들을 부여 할 수 있습니다. container 에는 반드시 display: flex 속성을 주어야 flexbox로 사용할 수 있습니다.
item은 flexbox를 내부를 구성하는 자식 요소들을 가르킵니다. 위 코드에서는 <div class="box">ITEM1</div> <div class="box">ITEM2</div> <div class="box">ITEM3</div> 이렇게 3개의 아이템이 있습니다. flexbox 내부의 아이템에는 다양한 속성으로 통해 배치 순서, 내부 내용을 정렬할 수 있습니다.
flexbox가 엘리먼트를 쌓는 법 (주축과 교차축)
flexbox에서는 내부의 요소들을 가로, 세로 방향으로 자유롭게 배치할 수 있는데, 그 때 사용하는 것이 flex-direction 속성입니다.
주축은 flexbox 내부의 item을 쌓아 갈 방향입니다. 주축을 설정하려면 flex-direction 속성을 활용하여 가로 혹은 세로로 부여해 줄 수 있습니다.
가로로 주축 설정하기 (flex-direction: row)
하나의 행(row)을 만들고, 내부의 아이템을 순차적으로 앞에서부터 채워 나갑니다.
세로로 주축 설정하기 (flex-direction: column)
하나의 열(column)을 만들고, 내부의 아이템을 순차적으로 위에서 아래로 채워 나갑니다.
참고로 display: flex의 기본 flex-direction 방향은 row입니다.
그런데 두 그림을 보면 이상한게 있지 않나요? flex-direction: column의 경우 A, B, C의 행의 끝까지 끝까지 영역을 차지하고 있고, flex-direction: row의 경우 내부 content 만큼의 사이즈만 차지 하고 있습니다.
여기서 알아야 할 것이 바로 교차축입니다.
교차축 (주축의 반대방향)
교차축은 주축의 반대방향입니다. 주축이 row(가로)라면, 교차축은 column(세로), 주축이 column(세로)이면 주축은 row(가로)로 설정됩니다.
교차축이 중요한 이유는 flexbox에서 기본적으로 교차축 방향의 가장 큰 엘리먼트에 크기를 맞추도록 되어 있기 때문입니다.
flex-direction의 방향이 row(가로)라면?
위 그림을 보면 아까와 달리 C의 높이가 커진 것을 알 수 있습니다. 그에 따라 A와 B도 마찬가지로 높이가 커졌습니다.
flex-direction의 방향이 column(세로)이라면?
그런데 이상하지 않나요? 내용은 늘어 났는데 길이는 그대로 입니다.
<div class="container column">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">더 많은 내용을 담고 있는 C</div>
</div>이유는 A, B, 더 많은 내용을 담고 있는 C를 div가 감싸고 있는데, div가 기본적으로 display: block 속성을 가진 태그이므로 화면 내 하나의 블록(처음부터 끝까지)를 차지하게 됩니다. 이미 flexbox 내에서 최대 크기를 가지고 있으므로 더 이상 커지지 않게 됩니다.
display: block, inline, inline-block 속성에 대해서 잘 모르신다면 이 링크를 읽어보세요.
flexbox의 가장 기본이 되는 특징들을 배웠으니, 이제는 실전 예제들을 통해서 flexbox 기능에 대해 좀 더 알아보도록 하겠습니다.
실전 예제 1. 정중앙에 아이콘 배치하기
flexbox가 없을 때는 중앙에 배치하려면 margin이나 position을 통해 어렵게 배치해야 했었는데, flexbox가 나온 이후로는 정말 쉽게 배치가 가능해 졌습니다.
<body>
<div class="container">★</div>
</body>위와 같이 div 태그 안의 ★가 하나 들어가 있는 것을 알 수 있습니다. 이제 이 태그를 정 중앙에 배치해보도록 하겠습니다. 중앙에 배치하기 위해선 크게 두 가지를 알아야 합니다.
주축을 따라 아이템을 정렬하는 방법 (justify-content)
위에서 사용하던 ABC 박스로 돌아가 보겠습니다.
정확한 비교를 위해 아까와 달리 container에 background-color 속성을 주었습니다. 이제 flexbox container에 justify-content 속성을 줘보도록 하겠습니다.
justify-content: center;
.container {
margin: 1em 0;
border: 3px dotted #4a4a4a;
padding: 0.5em;
background-color: #c2edc8;
display: flex;
flex-direction: row;
/* 아래 코드 추가 */
justify-content: center;
}
위 그림을 보면, 초록색의 container의 공간 중에서 정중앙에 flexbox item들을 배치한 것을 볼 수 있습니다.
이외에도 주로 많이 쓰는 것들이 몇 가지 있는데, 살펴보고 가도록 하겠습니다.
justify-content: flex-start;
flex-start 는 flexbox의 기본 설정으로 flexbox가 시작하는 점 기준으로 item을 정렬 시킵니다.
justify-content: flex-end;
flex-end는 flexbox가 끝나는 점에 맞추어 item을 정렬 시킵니다.
justify-content: space-between;
space-between 은 flexbox 내에 빈 공간을 균일하게 나누어 item 들 사이에 위치 시킵니다. 이외에도 space-around , space-evenly 등이 있으니 시간이 되시면 직접 해보시는 것을 추천드립니다.
교차축을 따라 아이템을 정렬하는 방법 (align-items)
위에서 사용하던 높이가 커진 ABC 박스로 돌아가 보겠습니다.
위 코드를 실행하면 위와 같은 화면이 브라우저에 그려집니다.
align-items: center;
현재 flex-direction이 row(가로)이기 때문에, 교차축은 y축 방향입니다. 그럼 이 상황에서 교차축으로 정렬하는 align-items를 center로 바꿔보도록 하겠습니다.
.container {
margin: 1em 0;
border: 3px dotted #4a4a4a;
padding: 0.5em;
background-color: #c2edc8;
display: flex;
flex-direction: row;
/* 아래 코드 추가 */
align-items: center;
}
container의 세로 방향의 정중앙을 기준으로 flexbox item들이 배열된 것을 알 수 있습니다.
align-items: flex-start, align-items: flex-end
align-items도 justify-content와 마찬가지로 flex-start와 flex-end가 있습니다.
교차축인 y축이 시작하는 점에서 부터 정렬을 맞추거나 y축이 끝나는 지점에 아이템을 정렬 시킬 때 사용합니다.
align-items: stretch
align-items 의 기본 설정이기도 한 stretch 는 교차축 기준 내부 item들 중 가장 높이가 큰 item 기준으로 높이가 설정됩니다.
아래 그림에서 보면 높이가 가장 큰 C 기준으로 A와 B의 높이가 늘어난 것을 알 수 있습니다.
아이콘 중앙 배치 마무리하기
주축과 교차축 방향으로 정렬하는 것을 배웠으니, 이제 아이콘을 중앙 배열해 보도록 하겠습니다.
<body>
<div class="container">★</div>
</body>위와 같이 ★을 div로 감쌌으니, div에 display: flex를 주어 flex container로 만들고, 주축으로 중앙 정렬, 교차축으로 중앙 정렬을 하면 될 것 같습니다. 그럼 해보도록 하겠습니다.
<style>
.container {
background-color: #3f29ef;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="container">★</div>
</body>
위와 같이 코드를 바꿨더니 어렵지 않게 중앙 배치를 할 수 있게 되었습니다👏👏
실전 예제 2. 네비게이션 바 만들기
기본 시작 코드는 위와 같습니다.
위 코드를 실행해보면, 아래와 같이 flexbox 기본 설정에 따라 flexbox가 시작하는 왼쪽에 flexbox item들이 붙어 있는 것을 알 수 있습니다.
flexbox 내에 하나의 아이템 배치 다루기
맨 처음 우리가 의도한 화면을 만드려면 Home 버튼을 기준으로 왼쪽에 빈 공간이 위치하여야 합니다. 이 때 쉽게 할 수 있는 방법이 있는데 margin의 auto 속성을 사용하는 것입니다.
코드를 아래와 같이 바꿔보도록 하겠습니다.
Home 영역에 margin-left: auto 속성을 줌에 따라 남은 공간을 손쉽게 Home 영역 왼쪽으로 배치하게 되었습니다.
한가지 아쉬운 점은 Home 말고도 다른 메뉴가 추가될 수 있으니, class가 home인 요소에 margin-left를 주기보단 아래와 같이 flexbox container 내부의 두번째 요소에 margin-left: auto를 주는 것이 좋을 것 같습니다.
실행했을 때 기존과 동일하게 나오는 것을 알 수 있습니다.
Wrap-Up
요즘에는 웹 페이지 내의 대부분의 배치를 flexbox로 할 정도로 flexbox의 용도는 무궁무진합니다. 여기서 다루지 않은 내용들도 많으니, flexbox에 대해서 좀 더 자세히 알고 싶다면 아래 링크를 통해서 추가적으로 공부해보시는 것을 추천 드립니다.
위 예제에서 사용했던 모든 코드는 아래 github에 올라가 있습니다.
Reference
https://medium.com/free-code-camp/learn-css-flexbox-in-5-minutes-b941f0affc34
