FlexBox로 레이아웃 잡기
Flexbox로 레이아웃 잡기
flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. 여러분은 query-selector 스프린트를 통해 flex라는 CSS 속성을 본 적이 있습니다. 이번 챕터에서는 flex 속성이 무엇을 뜻하는지 구체적으로 학습합니다.
display: flex 분석하기
부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법입니다. 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다.
<div id="outer">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
"display: flex"를 적용시키는 예시를 위해 작성한 HTML 코드
#outer {
display: flex;
border: 1px dotted red;
padding: 10px;
}
.box {
border: 1px solid green;
padding: 10px;
}
[HTML의 div 요소를 선택하여, 부모요소에 "display: flex"를 적용한 예시
[그림] "display: flex"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치됩니다.
Flex 요소에 방향 지정하기 (flex-direction)
flexbox는 박스가 수직으로 분할되는 것이 기본값입니다. 그러나 방향을 설정해주면, 수평으로도 분할할 수 있습니다. flex-direction 속성은 부모 박스요소에 적용합니다. 자식 박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식 요소가 영향을 받습니다. 주요 속성은 다음과 같습니다. 한번씩 적용해보세요.
- row (기본값)
- column
주의하세요!
- display 속성에 flex를 적용하는 것은 부모 요소에 적용합니다. (display: flex)
- 자식 요소는 flex라는 속성에 값을 적용합니다. (flex: 0 1 auto)
반드시 알아두기: grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. 자식 요소의 flex 속성을 추가하지 않으면, 다음과 같은 기본값이 적용됩니다.
flex: 0 1 auto;
자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값
flex 속성에 적용되는 세 가지 영역은, margin이나 padding에서 띄어쓰기를 기준으로 의미하는 바가 구분되는 것과 동일합니다. 그러나, flex 속성에 적용되는 세 가지는 **기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는** 값이 적용됩니다. 각각의 값이 의미하는 것은 다음과 같습니다.
flex: <grow> <shrink> <basis>
flex 속성에 적용되는 세 가지 값의 종류
이 순서와 기본값은 반드시 기억하세요. *"flex: grow shrink basis", "flex: 0 1 auto"*
margin이나 padding에서 상하좌우 각 방향을 따로 지정할 수 있었던 것처럼, flex에 적용되는 grow, shrink, basis도 각 값을 따로 지정할 수 있습니다.
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
flex에 입력되는 세 속성을 따로 입력할 수도 있습니다.
grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다. 부모 박스 안에 n개의 자식 박스가 있다고 가정합니다. 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미입니다. grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미합니다. HTML 파일을 다음과 같이 변경하고, 첫 번째 자식 박스에 target 클래스를 추가한 다음, 여러가지 방식으로 접근해보겠습니다.
<div id="outer">
<div class="box target">.box.target</div>
<div class="box">.box</div>
<div class="box">.box</div>
</div>
html 파일에서, 자식 박스 요소 중 첫 번째 자식 박스 요소에 target 클래스를 추가합니다.