【CSS】Flex 아이템이 여백을 채우거나 또는 크기를 축소하는 등의 신축 비율을 지정하는 Flex 속성《1》

Flex 속성은 부모 요소인 Flex 컨테이너와 자식 요소인 Flex 아이템이, Flex 컨테이너에 여백이 생기는 경우, flex-grow 속성을 사용하여 어느 정도의 비율로 여백을 채우거나, 반대로 Flex 컨테이너로부터 Flex 아이템이 밖으로 돌출될 경우에는 어느 Flex 아이템을 얼마나 축소시킬 지 등을 지정합니다.

flex 속성은 lex-grow, flex-shrink, flex-basis라는 3 개의 신축율 관련 속성 전반을 일괄 지정할 수 있습니다.

선택자 {flex: 속성값 속성값 속성값； }

</style>
 .flex_item {
　　flex: 3 3 150px;/*[flex-grow] [flex-shrink] [flex-basis] 순서*/
　　}
</style>

flex-grow

여백이 있는 경우, Flex 아이템이 다른 Flex 아이템과 비교하여 어느 정도의 크기(상대 값)로 할 것인지 신장율(flex grow factor)을 지정합니다.

Flex 컨테이너가 Flex 아이템을 포함하고도 남음이 있는 경우, 지정된 속성에 따라 자동으로 늘어나 여백을 채웁니다.

수치가 클수록 신장율이 커집니다. 보통 1,2,3 ... 등 정수 값을 지정합니다. 음수 값은 지정할 수 없습니다. 생략한 경우 1입니다.

선택자 {flex-grow: 속성값； }

</style>
 .flex_item {
　　flex-grow: 3；
　　}
</style>

스폰서 링크

flex-shrink

Flex 컨테이너에 Flex 아이템이 전부 들어가지 못하는 경우, Flex 아이템이 다른 Flex 아이템과 비교해서 얼마나 줄일지 또는 상대 값으로의 압축율(flex shrink factor)을 지정합니다.

수치가 클수록 폭이 좁아집니다. 보통 1,2,3 ... 등 정수 값을 지정합니다. 생략 한 경우 1입니다. 음수 값은 지정할 수 없습니다.

선택자 {flex-shrink: 속성값； }

</style>
 .flex_item {
　　flex-shrink: 2;
　　}
</style>

flex-basis

Flex 항목의 주축 방향 크기 (최초의 메인이 되는 크기)의 초기 값을 지정합니다.

폭(width)과 높이(height) 속성의 형식으로 값을 입력합니다.

선택자 {flex-basis: 속성값； }

</style>
 .flex_item {
　　flex-basis: 50px;
　　}
</style>

flex-grow 샘플

이하의 샘플에서는 flex 컨테이너에 4개의 flex 아이템을 배치시켜 flex-grow값 1 ~ 4을 각각 지정하여, 해당 flex 아이템의 크기가 어떻게 변화하는지를 검증해 보겠습니다 .

▼ 먼저 다음과 같이 flex 컨테이너에 width와 flex-flow : 가로 배치(row)와과 줄바꿈(반환) 없음(nowrap)을 지정했습니다.

[CSS]　flex 컨테이너

</style>
 .flex_container {
　　width:600px;
　　display:flex;
　　flex-flow:row nowrap;
　　}
</style>

▼

▼ 다음과 같이 flex 아이템에 width와 flex-flow : 가로 배치(row)와과 줄바꿈(반환) 없음(nowrap)을 지정했습니다.

[CSS]　flex 아이템

</style>
 div{
　　height:30px;
　　flex-basis:100px;
　　}

 .flex_grow0{
　　flex-grow:0;
　　background-color:#25b404;/*A*/
　　}
 .flex_grow1 { 
　　flex-grow:1;
　　background-color:#ffcc00;/*B*/
　　}
 .flex_grow2 { 
　　flex-grow: 2;
　　background-color:#085ffe;/*C*/
　　}
 .flex_grow3 { 
　　flex-grow: 3;
　　background-color:#eb02fa;/*D*/
　　}
</style>

▼ 기본 베이스가 되는 크기(flex-basis)를 100px로 지정하고 flex-grow 값을 "0"으로 하면, 아래와 같이 4개의 flex 아이템의 크기는 균등하게 100px이 되고, flex 컨테이너 크기(600px)에서 오른쪽 200px의 여백이 균등하게 메꾸어집니다.

[HTML]　flex-grow:0;

<div class="flex_container">
   <div class="flex_grow0">A</div>
   <div class="flex_grow0">B</div>
   <div class="flex_grow0">C</div>
   <div class="flex_grow0">D</div>
</div>

▼ 기본 베이스가 되는 크기 (flex-basis)를 100px로 지정하고 4개의 flex 항목 모두에 flex-grow 값을 "1"로 하면, 아래와 같이 4개의 flex 아이템의 크기는 균등하게 150px(flex 컨테이너 크기 600px를 4로 나누면)로, 4개의 flex 아이템이 오른쪽 여백을 균등하게 메꾸고 있습니다.

[HTML]　flex-grow:1;

<div class="flex_container">
   <div class="flex_grow1">A</div>
   <div class="flex_grow1">B</div>
   <div class="flex_grow1">C</div>
   <div class="flex_grow1">D</div>
</div>

▼ 기본 베이스가 되는 크기(flex-basis)를 100px로 지정하고 flex-grow 값을 "1"에서 "4"까지 각각 4개의 flex 아이템에 지정한 경우, 크기도 그 비율에 맞게 배열되어 flex 컨테이너의 빈 공간을 채우고 있습니다.

[HTML]　flex-grow:1;〜4;

<div class="flex_container">
   <div class="flex_grow0">A</div>
   <div class="flex_grow1">B</div>
   <div class="flex_grow2">C</div>
   <div class="flex_grow3">D</div>
</div>

스폰서 링크