9.1 flex-grow 속성
Flexbox에는 Flex-container 내의 요소들 간 공간 배분을 관리할 수 있는 다양한 도구가 있어.
flex-grow, flex-shrink, flex-basis 속성들은
다양한 조건에서 Flex-요소의 크기와 동작을 제어하는 데 중요한 역할을 해. 지금은 각각의 속성과 그 사용법을 자세히 살펴볼 거야.
flex-grow 속성은 Flex-요소가 컨테이너 내에서 사용 가능한 공간을 차지하기 위해 크기를 늘릴 수 있는 능력을 정의해.
flex-grow 값은 다른 Flex-요소와 비교했을 때 요소가 얼마나 늘어날 수 있는지를 나타내는 계수야.
값:
- 정수 또는 소수점 값
- 기본값: 0 (요소가 성장하지 않음)
사용 예:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 500px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.grow-1 {
flex-grow: 1;
}
.grow-2 {
flex-grow: 2;
}
HTML
<div class="container">
<div class="item grow-1">요소 1</div>
<div class="item grow-2">요소 2</div>
<div class="item grow-1">요소 3</div>
</div>
코드 설명:
.grow-1: 이 요소들은flex-grow: 1;값으로 고르게 성장할 수 있어-
.grow-2: 이 요소는flex-grow: 2;값이 있어flex-grow: 1;값인 요소보다 두 배 더 커질 수 있어
9.2 flex-shrink 속성
flex-shrink 속성은 Flex-요소가 컨테이너 내에서 공간이 제한될 경우 크기가 줄어들 수 있는 능력을 정의해.
flex-shrink 값은 다른 Flex-요소와 비교했을 때 요소가 얼마나 줄어들 수 있는지를 나타내는 계수야.
값:
- 정수 또는 소수점 값
- 기본값: 1 (요소가 줄어들 수 있음)
사용 예:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 150px;
}
.shrink-0 {
flex-shrink: 0;
}
.shrink-1 {
flex-shrink: 1;
}
HTML
<div class="container">
<div class="item shrink-0">요소 1</div>
<div class="item shrink-1">요소 2</div>
<div class="item shrink-1">요소 3</div>
</div>
코드 설명:
.shrink-0: 이 요소는flex-shrink: 0;값이 있어 크기가 줄어들지 않아.shrink-1: 이 요소들은flex-shrink: 1;값으로 필요에 따라 줄어들 수 있어
9.3 flex-basis 속성
flex-basis 속성은 자유 공간이 분배되기 전에 Flex-요소의 초기 크기를 정의해.
픽셀, 퍼센트 등 다양한 단위로 설정할 수 있어.
값:
- 다양한 단위의 길이 (
px,%,em등) - 기본값:
auto(크기는 콘텐츠로 결정됨)
사용 예:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.basis-auto {
flex-basis: auto;
}
.basis-100px {
flex-basis: 100px;
}
.basis-50percent {
flex-basis: 50%;
}
HTML
<div class="container">
<div class="item basis-auto">요소 1</div>
<div class="item basis-100px">요소 2</div>
<div class="item basis-50percent">요소 3</div>
</div>
코드 설명:
.basis-auto: 이 요소는flex-basis: auto;값으로 크기가 콘텐츠로 결정돼.basis-100px: 이 요소는 100픽셀의 고정된 초기 크기를 가져.basis-50percent: 이 요소는 컨테이너 너비의 50% 초기 크기를 가져
9.4 속성 사용
flex 속성은 flex-grow, flex-shrink, flex-basis를 설정하기 위한 축약형이야.
하나의 속성에서 공간 배분의 모든 측면을 관리할 수 있게 해주지.
문법:
.container {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
사용 예:
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-1 {
flex: 1 1 auto;
}
.flex-2 {
flex: 2 1 100px;
}
.flex-3 {
flex: 1 0 50%;
}
HTML
<div class="container">
<div class="item flex-1">요소 1</div>
<div class="item flex-2">요소 2</div>
<div class="item flex-3">요소 3</div>
</div>
코드 설명:
-
.flex-1: 이 요소는flex: 1 1 auto;값으로 다른 요소들과 함께 고르게 늘어나고 줄어들 수 있으며 초기 크기는 콘텐츠로 결정돼 -
.flex-2: 이 요소는flex: 2 1 100px;값으로flex-grow: 1;값인 요소보다 두 배 더 커질 수 있고 줄어들 수 있으며 100픽셀의 초기 크기를 가져 -
.flex-3: 이 요소는flex: 1 0 50%;값으로 늘어날 수는 있지만 줄어들 수는 없고 초기 크기는 컨테이너 너비의 50%야
GO TO FULL VERSION