코딩하는 김딸기
Flexbox 정렬/ Flexbox의 주요 속성 (flex-grow, flex-shrink, flex-basis) 본문
<div class="flex-container">
<div class="flex-item">A</div>
<div class="flex-item">A</div>
<div class="flex-item">A</div>
</div>
.flex-container {
display: flex;
}
.flex-item {
/* 직계 부모 요소인 .flex-container 기준으로 배치되는 Flex Items 상태가 됨. */
}
Flexbox의 세부 속성중 하나인 flex-direction속성의 초기값인 row에 의해 .flex-item들은 기본적으로 가로로 배치됩니다.
.flex-container {
display: flex;
/* flex-direction: row; 초기값으로서 세팅 되어있는 값 */
}
.flex-item {
/* flex-direction: row의 영향으로 가로 배치됨. */
}
이제 .flex-item요소들은 직계 부모 요소인 .flex-container가용 공간을 효과적으로 나누어 활용 할 수 있습니다.
display: flex속성이 지정된 부모 요소는 Flex Container로, 해당 요소의 자식 요소는 Flex Items로 지칭 하도록 하겠습니다.
가용 공간을 나누어 활용하는 두가지 방향성
Flexbox의 가용 공간
Flexbox가 일반적인 블록 레벨 요소와 다른 점은, 여러개의 Flex Items요소들이 하나의 부모 Flex Container요소가 제공하는 가용 공간을 공용으로 활용 한다는 점입니다.
기존 블록 레벨 요소의 가용 공간은, 요소당 한 줄씩, 가로 기준으로만 제공 되어졌습니다.
Flexbox에서는 이 가용 공간을 가로 뿐만 아니라 세로 기준에도 적용 할 수 있습니다.
가용 공간을 여백으로 활용
일반적인 블록 레벨 요소의 경우와 마찬가지로, 이 가용 공간은 margin: auto를 이용하여 자동 여백화 할 수 있습니다.
첫번째 Flex Items요소에게 margin-left: auto속성값을 지정 하면 다음과 같은 레이아웃을 만들 수 있습니다.
재미있는 점은, 2, 3번째 Flex Items들이 모두 같이 밀린 다는 점입니다. 공용으로 활용 가능한 가용 공간을, 첫번째 요소가 독차지 한 결과입니다.
가용 공간을 해당 요소의 크기로 활용
Flex Item에게 지정 할 수 있는 속성인 flex-grow속성을 이용하여 가용 공간을 해당 요소의 크기로 활용 할 수 있습니다. 해당 요소의 크기는 flex-basis속성에 의해 결정된 크기에, flex-grow속성에 의해 지정된 비율에 의해 최종 결정 됩니다. Flex Item 요소의 최종 크기 계산 문서에서 이를 자세히 다루도록 하겠습니다.
가용 공간 없이 넘쳐 흐르는 요소 컨트롤
줄바꿈 처리
Flex Container요소에게 지정할 수 있는 flex-wrap: wrap 속성 값에 의해 Flex Items요소들을 적절히 줄바꿈 처리 할 수 있습니다. 즉, 여러 줄로 만들어 각 줄 마다의 가용 공간을 만들어 낼 수 있습니다.
정렬하기
Flex Container 요소의 justify-content속성 또는 align-items속성을 이용하여 내부 Flex Items 의 가로 세로 정렬을 컨트롤 할 수 있습니다.
Flex Container는 주 축(Main Axis)과 교차축(Cross Axis)으로 나누어 설명할 수 있습니다. flex-direction속성의 값에 의해 이 Main Axis는 가로, 세로로 변경 될 수 있습니다.
- Main Axis 기준에서의 정렬 (가로정렬): justify-content
- Cross Axis 기준에서의 정렬 (세로정렬): align-items
-부모 관점에서 내부 아이템들을 가로 정렬
-부모와 자식의 정렬기준이 다르다면 자식의 정렬기준을 따른다
-부모의 높이를 늘린다면 늘어난 위아래 공간만큼의 가용공간이 발생
- 첫 번째 .frog 요소는 margin-left: auto;로 인해 오른쪽으로 정렬됩니다.->늘어난 가용공간 높이만큼 늘어남
- 두 번째 .frog 요소는 margin: auto;로 인해 가용 공간의 중앙에 정렬됩니다.->늘어난 가용공간에서의 중앙에 배열됨
- 세 번째 .frog 요소는 margin-right: auto;로 인해 왼쪽으로 정렬됩니다.->늘어난 가용공간 높이만큼 늘어남
이렇게 함으로써 .playground 내에서 각 .frog 요소가 가로축을 따라 정렬됩니다. 첫 번째 요소는 오른쪽 끝에, 두 번째 요소는 가운데에, 세 번째 요소는 왼쪽 끝에 배치됩니다.
if) align-items를 추가한다면?
align-items: flex-start;를 추가하면 Flexbox 컨테이너인 .playground 내의 자식 요소들이 수직 방향(세로축)으로 상단에 정렬됩니다. 이는 수평 정렬에는 영향을 주지 않지만, 요소들이 컨테이너의 상단에 배치되도록 합니다.
정렬 결과
- justify-content: flex-end;: 자식 요소들이 .playground 컨테이너의 오른쪽 끝으로 정렬됩니다.
- align-items: flex-start;: 자식 요소들이 컨테이너의 상단에 정렬됩니다.
*flex-basis, flex-grow
flex-basis
flex-basis는 Flexbox 아이템의 기본 크기를 설정하는 속성입니다. 이 값은 아이템이 flex 컨테이너 내에서 배치될 때, 아이템의 초기 크기를 정의합니다. flex-basis는 width나 height와 유사하지만, Flexbox 레이아웃에서 주 축(가로 또는 세로)에 따라 크기를 설정하는 데 사용됩니다.
- 기본값: auto
- 가능한 값: 길이 값(px, %, em 등) 또는 auto
flex-grow
flex-grow는 Flexbox 아이템이 flex 컨테이너 내에서 추가적인 공간을 차지할 수 있는 정도를 설정하는 속성입니다. 이 값은 상대적 비율로 작동하며, 다른 아이템들과 함께 사용될 때 그 비율에 따라 여유 공간을 나눕니다.
- 기본값: 0
- 가능한 값: 음수가 아닌 숫자
예를 들어:
결합하여 사용하기
flex-basis와 flex-grow는 종종 함께 사용되어 아이템의 초기 크기와 여유 공간을 차지하는 방식을 결합하여 정의합니다.
위 설정은 .item 요소의 초기 크기를 100px로 설정하고, 추가적인 여유 공간을 두 배의 비율로 차지하게 합니다.
요약
- flex-basis: Flex 아이템의 기본 크기를 설정합니다.
- flex-grow: Flex 아이템이 여유 공간을 차지할 수 있는 정도를 설정합니다.
- flex-basis: 40px;
- . auto는 flex-basis 속성의 기본값입니다. 이 기본값은 요소가 설정된 width 또는 height를 사용하여 크기를 결정하게 합니다.
- flex-grow: 0;
- .frog 요소가 flex 컨테이너에서 추가적인 공간을 차지하지 않도록 합니다. 즉, flex 컨테이너가 여유 공간이 있을 때, 이 요소는 그 공간을 차지하기 위해 크기가 늘어나지 않습니다.
flex-basis: 0;와 flex-grow: 1;을 함께 사용하면 Flexbox 레이아웃에서 아이템의 크기와 여유 공간 분배 방식에 대한 특정 동작을 정의할 수 있습니다. 이 두 속성의 조합은 아이템이 얼마나 많은 공간을 차지할지를 조절합니다.
flex-basis: 0;
- 정의: flex-basis: 0;은 Flex 아이템의 기본 크기를 0으로 설정합니다. 즉, 아이템의 크기는 내용물의 크기와 관계없이 0으로 설정됩니다.
- 용도: 이 설정은 주로 Flexbox 레이아웃에서 아이템들이 동일한 비율로 여유 공간을 나누도록 할 때 사용됩니다. 아이템의 기본 크기를 0으로 설정하면, 모든 여유 공간이 flex-grow 속성에 의해 분배됩니다.
flex-grow: 1;
- 정의: flex-grow: 1;은 Flex 아이템이 여유 공간을 나눌 때, 해당 아이템이 전체 여유 공간의 1 비율을 차지하도록 합니다.
- 용도: 이 속성은 Flex 컨테이너의 여유 공간을 아이템 간에 비율대로 분배할 때 사용됩니다. flex-grow 값이 큰 아이템은 더 많은 여유 공간을 차지합니다.
조합의 동작
- 기본 크기 0: flex-basis: 0;을 사용하면, 아이템의 기본 크기가 0이 되어, 아이템이 초기 크기에서 공간을 차지하지 않습니다.
- 여유 공간 분배: flex-grow: 1;은 모든 여유 공간이 각 아이템에 비율대로 분배되도록 합니다. 만약 모든 아이템이 flex-grow: 1;로 설정되면, 각 아이템은 여유 공간을 동일하게 나누게 됩니다.
정리
flex-basis: auto;
- 정의: Flex 아이템의 기본 크기를 자동으로 설정합니다.
- 효과: 아이템의 크기가 그 내용 또는 width/height 속성에 따라 결정됩니다.
- 아이템의 내부 컨텐츠만큼 너비를 자동 계산
flex-basis: 0;
- 정의: Flex 아이템의 기본 크기를 0으로 설정합니다.
- 효과: 아이템의 기본 크기가 0으로 설정되어, 아이템은 초기 크기로 공간을 차지하지 않습니다.
flex-grow: 1;
- 정의: Flex 아이템이 여유 공간을 차지하는 비율을 1로 설정합니다.
- 효과: Flex 컨테이너 내의 여유 공간이 있을 때, 아이템이 그 여유 공간을 동일한 비율로 나누어 차지합니다.
함께 사용 시 (flex-basis: 0; flex-grow: 1;)
- 효과: 아이템의 기본 크기는 0으로 설정되고, 여유 공간을 동일하게 나누어 차지합니다. 즉, 모든 아이템이 컨테이너의 여유 공간을 균등하게 차지하게 됩니다.
Flex 아이템의 min-width 초기값은 auto입니다. 이 값은 Flex 아이템이 최소한 내부 콘텐츠의 크기만큼의 너비를 가지도록 설정합니다.
따라서 flex-basis: 0; ( Flex 아이템의 기본 크기를 0)을 설정하더라도 아이템의 너비는 내부 콘텐츠의 크기보다 작아질 수 없습니다.
->내부 콘텐츠보다 더 작은 너비를 허용하려면, min-width를 명시적으로 0으로 설정해야 합니다.
1) flex-basis: 0; flex-grow: 1;
- flex-basis: 0;: Flex 아이템의 기본 크기를 0으로 설정합니다. 이는 아이템이 초기에는 아무런 공간도 차지하지 않음을 의미합니다.
- flex-grow: 1;: Flex 컨테이너에 여유 공간이 있을 때, 모든 여유 공간을 이 아이템이 차지하도록 설정합니다. 모든 아이템이 동일한 비율로 여유 공간을 나눕니다.
결과: 모든 아이템은 초기 크기가 0이므로 여유 공간이 생길 때 동일한 비율로 그 공간을 나누어 가집니다. 각 아이템은 컨테이너의 여유 공간을 균등하게 나눕니다.
=>컨테이너의 공간을 균등하게 나눠가짐
2) flex-basis: auto; flex-grow: 1;
- flex-basis: auto;: Flex 아이템의 기본 크기를 auto로 설정합니다. 이는 아이템의 크기가 그 내용 또는 width/height 속성에 따라 결정됨을 의미합니다.
- flex-grow: 1;: Flex 컨테이너에 여유 공간이 있을 때, 모든 여유 공간을 이 아이템이 차지하도록 설정합니다. 모든 아이템이 동일한 비율로 여유 공간을 나눕니다.
결과: 아이템의 기본 크기는 콘텐츠 또는 설정된 width/height 값에 따라 결정됩니다. 그 후, 여유 공간이 생기면 모든 아이템이 동일한 비율로 그 공간을 나눕니다.
=>컨텐츠 영역을 제외한 컨테이너의 여유공간을 균등하게 나눠가짐
차이점 요약
- 초기 크기:
- flex-basis: 0;: 초기 크기가 0입니다.
- flex-basis: auto;: 초기 크기가 콘텐츠나 width/height 속성에 의해 결정됩니다.
- 여유 공간 분배:
- 두 경우 모두 flex-grow: 1;이므로 여유 공간이 생기면 동일한 비율로 나누어 가집니다.
- 최종 크기:
- flex-basis: 0;: 최종 크기는 오로지 여유 공간의 분배에 의해 결정됩니다.
- flex-basis: auto;: 최종 크기는 기본 크기(콘텐츠 크기 또는 설정된 크기)와 여유 공간의 분배가 결합된 결과입니다.
예시
flex-basis: 0; flex-grow: 1;
결과: 전체 공간이 800px일 때, 각 아이템은 200px씩 동일하게 나눕니다.
flex-basis: auto; flex-grow: 1;
결과: 각 아이템의 초기 크기가 달라도 여유 공간을 균등하게 나눠 가집니다. 예를 들어, 여유 공간이 800px이라면 각 아이템은 800/4 ≈ 200px씩 추가로 차지합니다. 따라서 최종 크기는 각각 183.33px, 283.33px, 133.33px가 됩니다.
flex-shrink
flex-shrink는 Flexbox 레이아웃에서 Flex 아이템이 컨테이너의 크기가 줄어들 때 어떻게 축소되는지를 결정하는 속성입니다. 기본적으로 Flex 아이템은 flex-shrink 속성을 사용하여 필요할 때 축소될 수 있으며, 이 속성의 값이 클수록 해당 아이템이 더 많이 축소됩니다.
flex-basis: 200px;
- flex-basis는 Flex 아이템의 초기 크기를 설정합니다. 이 초기 크기는 Flex 컨테이너 내의 다른 요소와 공간을 나누기 전에 해당 요소가 차지하는 기본 크기입니다.
- Flex 아이템의 초기 크기를 200px의 너비로 설정하여, 여유 공간을 나누기 전의 기본 크기를 지정합니다.
flex-shrink: 1;
- flex-shrink는 Flex 아이템이 Flex 컨테이너의 크기가 줄어들 때 어떻게 축소되는지를 결정하는 속성입니다.
- ->수축비율
- 여기서는 1로 설정되어 있으므로, 이 아이템은 컨테이너의 크기가 줄어들어 여유 공간이 부족해질 때 동일한 비율로 축소됩니다.
- 축소되다가 내부의 컨텐츠보다 크기가 축소되어야 한다면 축소되지 않고 컨테이너를 빠져나간다
-flex-wrap는 컨테이너를 삐져나가면 아래층로 내린다->shirink동작안함
