[CSS] “flex : 1”이 뭘까?

클론 코딩을 하는 와중, flex:1이란 코드를 발견하였습니다.

이 코드로 인해서 요소가 딱 원하는 너비를 가지게 되었는데, 도대체 왜 이런 현상이 나타나는 건지 짚고 넘어 가보려 합니다!

🤔”flex : 1”이 뭐지?

• flex : 1 속성은 flex-grow, flex-shrink, flex-basis의 단축 속성으로 flex : “grow” “shrink” “basis” 순서를 따릅니다.
• ‘flex-grow” 속성이 생략되면 기본값은 0, ‘flex-shrink 속의 기본값은 1, ‘flex-basis’의 기본값은 auto입니다.
• flex : 1 의 값은 shrink, basis 속성값이 생략된 것으로 다음과 같습니다.

flex-grow : 1;
flex-shrink : 1;
flex-basis : auto;

---

그렇다면, flex-grow와 shrink, basis 속성이 무엇일까요?

🤔”flex-grow”가 뭐지?

• flex-item 요소가 flex-container 요소 내부에서 할당 가능한 정도를 선언합니다.
• item들이 동일한 flex-grow값을 갖는다면, 동일한 공간을 할당 받습니다.
• 아래의 이미지를 통해 쉽게 확인할 수 있습니다.

🤔”flex-shrink”는 뭐지?

• flex-shrink는 값으로 숫자값을 받습니다.
• item 요소의 크기가 container 요소의 크기보다 클 때 shrink속성을 사용하여 크기를 조절할 수 있습니다.
• 기본값으로 1값을 가지며, flex-basis값으로 설정한 값보다 작아질 수 있습니다.
• 0으로 가지면 크기는 basis값에 고정되고 값이 커질수록 크기가 줄어듭니다.

🤔”flex-basis”는 뭐지?

• flex-basis는 요소의 기본 크기를 설정합니다.
• 기본값으로 auto값을 가집니다.
• 값으로 <length>값과 “auto”값을 가집니다.

---

😎 추가적인 단축속성!

 {
	flex : 1 /*flex : 1 1 auto; 값을 가진다.*/
	flex : 2 /*flex : 2 1 auto; */
	flex : 1 30px /*flex : 1 1 30px, shrink값으로는 숫자값만 받는다, 길이를 받았으므로 basis값이다.*/
	flex : 1 1 100px /*flex : 1 1 100px*/
}

---

출처

flex - CSS: Cascading Style Sheets | MDN

flex - CSS: Cascading Style Sheets | MDN

이번에야말로 CSS Flex를 익혀보자

이번에야말로 CSS Flex를 익혀보자