(5)CSS_레이아웃_2_FlexBox-5-flex-grow, flex-shrink,6-flex-basis

5-flex-grow, shrink 

 

＃Default 상황 :

• display : flex
• Div Container > Red, Green, Blue 

＃알아야 할 개념 :

● ☆개념1_ flex-grow 속성

○ 정의 : 

- ★ 쓰이는 상황 : 감싸고 있는 부모 Box 내의 요소들이 꽉채우기 부족한 상황 => 어떤 특정 요소(들)로 꽉 채우고 싶어질 때,

- 정의 : 각 요소에 채우기 위해 늘리는 양의 비율의 우선순위를 정해주는 속성

- ★ 요소의 Flex-grow의 Default 값 : 0 

- Ex1_ :  Red만 늘려서 부모 Box에 꽉 채우기 => Red CSS에 flex - grow를 Default값보다 크게 적용

- Ex2_ :  Red와 Blue 늘려서 부모 Box에 꽉 채우기 => Red , Blue CSS에 flex - grow를 Default값보다 크게 적용

- Ex3_ : ex_2의 결과 상황에서, Red의 width를 제한 두기  => 영향 X

즉, CSS에서 정한 width, height 값보다, flex-grow, shrink가 더 우선순위 이다.

 

○ 주로 쓰임새 :

display : flex + justify - content : center : align - center 로 각 요소들을 배치했을 때, 특정 요소로 나머지 여백을 채우고 싶을 때 사용

Blue Box에 flex-grow : 1를 주기 전

Blue Box에 flex-grow : 1적용 후 출력상화

 ☆개념2_ flex-shrink 속성

○ 정의 : 

- ★ 쓰이는 상황 : 감싸고 있는 부모 Box 내의 요소들의 설정된 크기가 너무 커서, 줄이고 싶을 떄, => 어떤 특정 요소(들) 안줄이고 싶거나, 줄이는 비율을 분배하고 싶을 때,

- 정의 : 각 요소에 꽉 채워진 상황을 위해 줄이는 비율의 우선순위를 정해주는 속성

- ★ 요소의 Flex-shrink의 Default 값 : 1 //결국 넘어서면, 줄어들긴 해야 한다는 뜻 

- Default 상황 : 부모 Box의 width : 500px, 요소들의 width : 300px, 로 이미 부모 Box의 width를 넘어선다.

 

=> flex 성질 때문에 (정확하게는 flex-shrink의 default 값 : 1) 저절로 같은 비율의 양으로 Red, Greenm, Blue 박스의 width가 줄었다.

- Ex1_ Red를 더 많이 양을 줄여, 부모 Box의 width에 맞게 한다. => Red Box CSS에 flex-shrink 값 1보다 크게 한다.

- Ex2_ Red를 가장 크게 하여, 부모 Box의 width에 맞게 한다. => Green, Blue Box CSS에 flex-shrink 값 1보다 크게 설정

6- flex-grow + flex-basis / flex-shrink + flex-basis

＃Default 상황 2가지 :

● 상황 1 : 

• display : flex + justify-content : space-between + align-items : center
• Div Container > Red, Green, Blue + 부모Box안의 요소들의 여백이 많은 상황 (= grow로 꽉채우게 마려운 상황)

● 상황 2 :

• display : flex + justify-content : space-between + align-items : center
• Div Container > Red, Green, Blue + 요소 width가 매우 크게 설정됨

 

＃알아야 할 개념 :

● ☆개념1_ flex-grow 상황에서, basis의 의미

○ EX_1 :

상황1 + Red Box에 flex - grow : 0 (default값) + flex-basis : 200px를 한경우, => 처음 성장 전 200px로 잡게 된다.

결론 : flex -grow : 0 이더라도, 200px에서 시작하라는 의미가 더 쎼기 때문에, 200px로늘어나서, 출력된다.

○ EX_2 :

상황1 + Red Box에 flex - grow : 1 + flex-basis : 200px를 한경우, => 처음 성장 전 200px로 잡게 된다.

결론 : flex -grow : 1 이 걸렸다 => 부모 Box의 공간을 모두 채워야 한다. => Red만 존나 늘어나서 Green, Blue는 옆으로 밀려난다.

○ 요약 :

• flex - grow : 0 + flex - basis => 다 채울 필요는 없지만, 첫 시작 픽셀이 존재한다.
• flex + gorw : 1이상 + flex- basis => 부모 Box가 다 채워져야 하는 미션 O + 첫 시작 픽셀이 존재한다.

 

● ☆개념2_ flex-shrink 상황에서, basis의 의미

○ 정의 : 부모Box의 width보다 요소들 width가 넘쳐나는 상황에서, 요소들의 width를 줄여야 할때, 시작점이  무조건 flex-basis 값이며, 그 값부터 줄어든다 의 의미 //뭐지 시발

 

○ EX_1 :

• Container 의 width : 700px
• 요소 Red , Green , Blue 의 width 300px
• 요소 Red에 flex - basis : 200px

Green : 259px , Blue : 259px , Red : 173.3px

※연습문제  :

● 문제 조건 :

문제 요구 사항

변경 전 출력 장면

 

● 풀이 과정 :

 

○ 과정1 _ 구조 파악

음악 리스트 부분 HTML 코드

○ 모범답안_ =>과정2 :

①  트랙 넘버의 폭 24px 유지하게끔 한다 => flex - basis : 24px;

②. 트랙 title Box의 폭을 꽉 채운다. => flex 상황에서는 width, height 조절로가 아닌, flex - grow를 적용하여, 꽉 늘린다.

=> track-title Box에 flex - grow : 1; 대입

③. 아이콘 Box의 크기는 줄지 않도록 한다 => flex-shrnk : 0; 대입

 

# 핵심 정리 :

한 부모Box 내 여러 요소가 있는데, flex - basis + flex - grow + flex - shrink를 함께 사용되는 상황에서

★한 특정 요소는 크기를 고정 시키고 싶을 때! => flex-basis : 얼마로 고정시키고 싶은지의 px값

★특정요소를 길게 확장(생긴거를 확장시키는 것이 아님) 배치 싶을 때, => flex-grow : 0보다 큰값

★ 요소들을 확대/ 축소 상황에서, 특정 요소는 안 줄여지도록 고정 하고 싶을 때, => flex - shrink : 0