(6)CSS_레이아웃_2_FlexBox-5-flex-grow, flex-shrink,6-flex-basis_연습문제2_분석

※연습문제2  :

● 문제 상황 :

문제 상황

● 요구 조건 :

요구조건

● 모범답안 풀이 :

○ 과정1_ 구조 파악 :

○ 과정2_ "info" , "Control" , "time" Box 배치 시켜보기 //여기서 부터 모범답안이랑, 내 답안이 다름

①.부모 Box 에 display : flex + align-items : center + justify - content : space - betweeen ;

②. justify - content : space - betweeen 대신에, "Control"를 제일 크게 확장 시킨다. => "Control" Box 에 flow-grow :1; 적용 (+ 재생바들은 가운데 정렬 유지해야 하므로, "Control" Box에 justify-content : center + align-items : center 적용)

○ 과정3_ "Control" Box 와 마찬가지로 "info" Box, "time" Box 안에 요소들 적절히 배치

• "info" Box => display : flex , justify-content : center , align-items : center
• "time" BOx => display : flex ,  justify-content : flex-end , align-items : center

★여기서 문제 상황 : "Controls" Box 부분이 정 가운데에 있지 않음

 

모범답안으로 풀 때 (justify-content ; space - between으로 배치 않고, 정중앙 배치 하는 법)

=> ★왼쪽 Box 와 오른쪽 Box가 flex - grow 상황에서 width값이 같지 않아 발생

=> 해결 방법 : 완쪽 , 오르쪽 Box ("info", "time")에 flex - basis 이용하여 같은 px로 고정

 

○ 과정4_ "info" Box, "time" Box에 flex-basis : 300px 적용

 

 

# 핵심 정리 :

부모 Box에 대하여 3 Box (크기가 서로 다른) 들을 jusifiy - content : space - between 이 아닌 방법으로 푸는 방법 :

과정1_ 가운데 Box 에 flex-grow : 1 적용

과정2_ 왼쪽 오른쪽 Box에 flow-basis : npx를 이용하여, 두 박스 크기를 같게 하여, 정중앙으로 유지되게 한다(가운데 양 옆 공백 너비가 같아지게 된다.)