웹(HTML, CSS, JS)(07.25) - min-height, flex-grow, flex-shrink

min-height

• min-height 속성은 요소의 최소 세로 크기를 설정한다.
• height로 50hv을 지정하고 지정한 길이 이상으로 본문을 작성하여서 border로 묶어보면 끊기게 되는 것을 볼 수있다. 이럴 경우 min-height을 사용하여 본문이 더 길어졌을 때 감싸진다.

 

flex-grow, flex-shrink

flex-grow, flex-shrink이 두 속성은 flex-basis 속성으로 정한 플렌스박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 한다.

여기서 flow-shrink 속성은 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는 방법을 말한다.
flex-shrink 속성은 플렉스박스에 flex-wrap:wrap; 속성을 부여한 경우 적용되지 않는다. flex-wrap 속성을 정의하지 않거나(디폴트값이 nowrap), flex-wrap:nowrap 속성을 부여해야 한다.

-flex-shrink 속성은 기본값이 1이기 때문에 속성을 정의하지 않아도 자동으로 아이템이 축소되어 적용된다.

• 자동으로 아이템 너비가 축소되지 않도록 하려면 반드시 flex-shrink:0;을 아이템에 선언해야 한다.

 

 

flex는 자식한테만 영향을 미친다. 지정된 자신도 영향을 받지 않는다.
align-items이 stretch가 기본값으로 높이를 따라가게 된다.