웹 제작 display : flex(2)

flex-grow

※ flex-item은 row값일때 width: auto = 0이다.flex-grow는 flex-item이 felx-container에 남는공간을 사용하겠다는 의미를 가진다.

flex-grow 사용 시 여백까지 사용

위에 이미지의 flex-grow: 1;로 인하여 각각 flex-item마다 200px만큼의 값을 가지게 된다.

하단의 이미지는 각각의 flex-iten에 기입하게 되면 비율만큼 나눠 가지게 된다.1 : 2 : 1 로 나눠 가져서 150 : 300 : 150 으로 나눠 갖는다.
flex-grow

flex-basis

flex- grow를 사용하게 되면 하위요소크기에 따라 비율이 달라진다.
방지하는 방법은 flex-grow와 flex-basis: 0;을 함께 사용하면 된다.
flex-basis: 0;과 width: 0;은 비슷한 역할을 하게 되는데 반응형 할때 불편하기 때문에
width: 0; 말고 flex-basis: 0;을 활용하는것이 좋다.

flex-grow 비율 망가짐 방지(flex-basis)