[HTML & CSS] Flex(3)

[flex-grow]

• flex-grow는 비율로 너비를 설정할 수 있는 속성이다.
• 속성값은 1부터 n까지 정수, 소수점 사용 가능하다.
• flex-container에서 남는 공간을 사용한다.
• 여기서 말하는 남는 공간이란, 여백을 사용하거나 다른 형제들이 사용하고 남은 공간을 뜻한다.
• 예를 들어 flex-container에서 width 600px를 지정하고 3개의 flex-item에 flex-grow를 1, 1, 1로 지정하면 flex-itme에 따로 width를 지정하지 않고도 남는 공간에 의해서 1:1:1 비율로 200px 200px 200px로 반응형처럼 너비가 설정된다.
• 공식을 쓰자면 "flex-container의 남는 공간 / flex-item들의 flex-grow의 총 값 = ??" 에서 ??값을 flex-grow 수치대로 나눠가지면 된다.
• flex-grow는 flex-item 안쪽 요소 크기(텍스트 등)에 따라서 비율이 달라진다. 다시 말해 텍스트를 적는 순간 비율이 텍스트의 길이마다 또 달라진다.
• 위와 같은 상황을 원하지 않을 때는 flex-grow와 함께 flex-basis: 0;을 함께 사용한다.
• flex-basis: 0; 은 width: 0;과 같은 역할을 한다.
• 여기서 말하는 역할은 flex-grow를 사용할 때 같은 비율로 사용할 수 있도록 만들어 준다.

See the Pen flex-grow by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 15일차 복습 by psm817 (@psm817) on CodePen.