2023-05-30 높이를 공유하는 flex-item ,높이를 공유하는 flex-item 높이 최소화 후 세로 정렬,flex-grow

높이를 공유하는 flex-item

 

상위 요소는 높이가 auto 일때 (높이 값을 따로 지정안할때) 하위 요소의 높이 값을 갖는다. 그래서 지금 item 1 의 높이 값이 300px 이니까 300px를 받게 되고 동시에 display : flex; 의 특징 중 하나인 flex item 은 높이가 auto 일때 flex container 의 높이를 물려받게 되는걸로 인해 똑같이 item 2 도 높이 300을 갖게 된다.

 

 

 

 

 

높이를 공유하는 flex-item 높이 최소화 후 세로 정렬

디스플레이 flex 를 적용하고  그 적용한 효과를 받는 flex item 은 높이를 정해주지 않아도 자동으로  container 의 높이를 받는다.  그런데 여기서  align-item :  center  ( start , end 도 가능) 를 적용시켜준다면?

 

 

 

짠, 사라진다.  사실 가운데 있지만 보이지는 않는것이다  높이가 자동으로 설정되어있고 가운데 정렬을 하다보니 억지로 찌부 시킨 느낌? 이다.  여기서  형태를 들어내고자 하면  item 에 높이를 설정 해주든가  텍스트를 적으면 된다.

텍스트를 적었더니 가운데 있던 item 이 나타났다. 

 

 

 

 

 

flex-grow

 

flex-grow 라는 속성은 flex-container에 남는 공간을 차지한다.
속성값은 비율이라고 생각하면 좋다. 
속성값을 0~ n 까지 커스텀 가능하다. 

flex-grow 를 적용한 flew-item 은 안쪽 요소 크기에 따라서 차지하는 비율이 달라진다.
flex-basis : 0 을 함께 사용한 flex-item 은 요소 크기에 상관없이 비율을 차지한다. 

 

초록색 부분에 더많은 텍스트를 쳐서  flex-basis : 0 을 적용해주지않는 다면 초록색 부분이 좀더 커지겠지만 지금은 적용된 상태이므로 3부분 다 동일한 너비를 가지고 있다. 

 

 

flex 연습 하는 사이트

 

https://flexboxfroggy.com/#ko 

Flexbox Froggy