[HTML/CSS] FlexBox를 이용한 레이아웃 설정

 

 

 

Flexbox로 레이아웃 잡기

 

display: flex 분석하기

 

• 부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법
• 기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치

 

html

<div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

 

 

css

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
}

결과

 "display: flex"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치됨

 

 

 

---

Flex 요소에 방향 지정하기 (flex-direction)

 

• flexbox는 박스가 수직으로 분할되는 것이 기본값이나 방향을 설정해주면, 수평으로도 분할 가능
• flex-direction 속성은 부모 박스요소에 적용
• 부모 요소에 의해 자식 요소 또한 영향을 받음

 

주요속성

• row (기본값)
• column

* 주의

• display 속성에 flex를 적용하는 것은 부모 요소에 적용됨 (display: flex)
• 자식 요소는 flex라는 속성에 값 적용 (flex: 0 1 auto)

 

 

 

---

 

반드시 알아두기: grow(팽창 지수),  shrink(수축 지수),  basis(기본 크기)

 

자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됨

자식 요소의 flex 속성을 추가하지 않으면, 다음과 같은 기본값 적용

 

자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값

flex: 0 1 auto;

 

 

 

 

 

 flex 속성에 적용되는 세 가지
 **기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는** 값이 적용

flex: <grow> <shrink> <basis>

 

 

세 속성 개별 입력 가능

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

 

 

 

 

 

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 클래스를 추가합니다.

 

 

 

 

 

grow : 자식 박스는 얼마나 늘어날까

 

target 클래스에서, flex-grow 속성의 값을 1로 변경합니다.

target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어남

위 설명대로라면 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다.

그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이입니다.

.target {
  flex: 1 1 auto;
}

[코드] target 클래스에 flex-grow 속성의 값을 1로 설정

[그림] target 클래스에만 flex-grow 속성에 1을 적용한 경우

box 클래스의 flex-grow는 기본값인 0입니다. 만약 box 클래스의 flex-grow 속성에 값을 1로 설정하면, 모든 박스가 늘어나려고(grow) 합니다. 결과적으로 모든 박스가 동일한 비율로 가로 길이가 늘어납니다. (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)

.box {
  flex: 1 1 auto;
}

[코드] box 클래스의 flex-grow 속성의 값을 1로 설정

[그림] box 클래스의 flex-grow 속성에 1을 적용한 경우

 

변경사항은 codepen에서 확인할 수 있습니다.

flex-grow 속성에 적용하는 값은 비율을 의미합니다. 이 점을 잊지 마세요. 모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가집니다. 다음 코드는 전부 같은 모양으로 렌더링됩니다.

.box {
  flex: 1 1 auto;
  /*
  flex: 2 1 auto;
  flex: 3 1 auto;
  flex: 4 1 auto;
  */
}

.target {
  /* flex 값을 지정하지 않음 */
}

[코드] 모든 자식 박스에 flex-grow 속성의 값을 동일하게 적용하면, 모든 자식 요소의 flex-grow 속성의 값을 1로 설정한 것과 같습니다.

box 클래스의 flex-grow 속성에는 1을 그대로 두고, target 클래스의 flex-grow 속성의 값을 변경해보겠습니다. target 클래스를 가지고 있는 자식 박스는, 다른 자식 박스와의 비율만큼 크기가 더 커집니다.

.box {
  flex: 1 1 auto;
}

/* 
 * 자식 박스가 총 세개인데, target만 2의 비율을 가집니다.
 * 2(target) + 1(box2) + 1(box3) = 4 이므로,
 * target의 비율은 50% 입니다.
 */
.target {
  flex: 2 1 auto;
}

[코드] target 클래스의 flex-grow 속성을 2로 설정

* target 클래스에 적용된 flex-grow 속성의 값이 1, box 클래스에 적용된 flex-grow 속성의 값이이 1일 경우, grow가 적용된 전체 값은 1+1+1 = 3입니다. 따라서, 각 자식 박스의 가로 길이는 1/3의 길이를 가집니다.

[그림] 모든 자식 박스의 flex-grow 속성에 같은 값을 설정한 경우

* target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 2+1+1 = 4입니다. 따라서, target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이를 가집니다.

[그림] target 클래스의 flex-grow 속성에만 2를 적용하고, box 클래스의 glex-grow 속성은 1로 설정한 경우

 

변경사항은 codepen에서 확인할 수 있습니다.

 

shrink: 자식 박스는 얼마나 줄어들 수 있을까요?

 

• shrink는 grow와 반대로, 설정한 비율만큼 박스 크기 축소
• 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다.
• 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다.
• flex-shrink 속성은 width나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다.
• flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

 

 

 

 

 

basis: 이 박스의 기본 크기는 몇일까요?

자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

<div id="outer">
  <div class="left">메뉴</div>
  <div class="right">본문</div>
</div>

[코드] HTML 파일에 작성된 메뉴와 본문이라는 두 가지 자식 박스

/* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.left {
  flex: 0 1 100px;
}

/* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */
.right {
  flex: 1 1 auto;
}

[코드] 왼쪽 메뉴 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px을 적용합니다.

[그림] 오른쪽 본문 박스는 flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받습니다.

 

변경사항은 codepen에서 확인할 수 있습니다.

질문: flex-grow 속성에 동일한 값을 입력한 박스가 정말 1:1:1이 맞나요? 크롬 개발자 도구의 Element 탭에서 실제 크기를 > 확인하세요.

[그림] flex-grow 속성에 동일한 값을 입력한 박스

 

자식 박스 각각의 flex-basis 속성에 0%를 값으로 적용해보세요. auto를 사용할 때와 어떤 차이가 있나요?

기억하세요. flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다. diplay 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis로 설정된 크기가 항상 유지되는 것은 아닙니다. flex-grow 속성의 값이 1 이상인 경우, flex-basis 속성에 적용한 값보다 커질 수도 있습니다. 실제 레이아웃을 구현하면서 막히는 경우에는, 다음의 원리를 참고할 수 있습니다.

참고

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.

콘텐츠 정렬 방법

Flexbox를 원하는대로 제어하기 위해서는 axis(축)의 개념에 대한 이해가 필요합니다. axis는 main axis 와 cross axis로 구분합니다.

main axis은 flex-direction 속성에 의해서 결정됩니다. flex-direction의 기본 값인 row 인 상태일 때 main axis 는 가로축이 됩니다.

cross axis는 여러 개의 main axis와 수직을 이루는 방향입니다. main axis가 가로일 때 cross axis는 세로가 됩니다.

이 axis들을 기준으로 정렬할 수 있는 속성들에 justify-content 와 align-items 가 있습니다. justify-content 속성은 main axis를 기준으로 정렬하며, align-items 속성은 cross axis를 기준으로 정렬합니다.

만약, flex-direction 속성의 값을 column 으로 준다면 main axis과 cross axis는 서로 바뀌겠죠?

이어지는 내용은 flex-direction 이 row 인 상태, 즉 main axis가 가로인 상태를 기준으로 설명하는 내용입니다.

콘텐츠 수평 정렬 (justify-content)

부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있습니다. 다음은 justify-content 속성의 값이 될 수 있는 주요 옵션입니다. 한번씩 적용해보세요.

• flex-start
• flex-end
• center
• space-between

콘텐츠 수직 정렬 (align-items)

부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있습니다. 다음은 align-items 속성의 값이 될 수 있는 주요 옵션입니다. 한번씩 적용해보세요.

• flex-start
• flex-end
• center
• stretch