target 클래스에서, flex-grow 속성의 값을 1로 변경합니다. target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어납니다. 위 설명대로라면 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이입니다.
.target{
flex:11 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:11 auto;
}//box 클래스의 flex-grow 속성의 값을 1로 설정
[그림] box 클래스의 flex-grow 속성에 1을 적용한 경우
flex-grow 속성에 적용하는 값은 비율을 의미합니다. 이 점을 잊지 마세요. 모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가집니다. 다음 코드는 전부 같은 모양으로 렌더링됩니다.
.box{
flex:11 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:11 auto;
}/* * 자식 박스가 총 세개인데, target만 2의 비율을 가집니다. * 2(target) + 1(box2) + 1(box3) = 4 이므로, * target의 비율은 50% 입니다. */
.target{
flex:21 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로 설정한 경우
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 크기를 지정하면 그 크기는 유지됩니다.
<divid="outer">
<divclass="left">메뉴</div>
<divclass="right">본문</div>
</div>[코드] HTML 파일에 작성된 메뉴와 본문이라는 두 가지 자식 박스
/* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.left{
flex:01100px;
}/* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */
.right{
flex:11 auto;
}[코드] 왼쪽 메뉴 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px을 적용합니다.
[그림] 오른쪽 본문 박스는 flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받습니다.
질문: 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
Bare minimum requirements
이 챕터의 레이아웃: 화면을 나누는 방법에서 봤던 VS Code 레이아웃 클론을 직접 만들어 볼 수 있을까요? 이 챕터를 충분히 학습했다면, 여러분도 하실 수 있습니다. 스스로 도전해보세요.
