[CSS] Flex item 속성

 

Flex item 속성

 

---

 

Flex item에서 사용 가능한 속성 정리

 

• flex-basis : 항상 main axis를 기준으로 flex item의 초기 너비값을 결정
  일반적으로는 width와 같은 기능을 하지만 flex-direction: column; 인 상태에서는 main axis가 수직축으로 변경되면서 flex-basis 값은 높이(height)로 정의된다는 차이점이 있습니다.  width와 flex-basis 두 속성 모두 값을 지정할 경우  flex-basis 속성값이 우선순위를 갖게 됩니다. 
  
  만약 content item의 실제 너비값이 flex-basis 로 설정한 너비값보다 클 경우, 설정한 값과는 상관없이 content item의 실제 너비값에 따라 렌더링됩니다. 하지만 content item의 실제 너비값이 width로 설정한 너비값보다 클 경우, content item의 실제 너비값과는 상관없이 width가 지정한 너비값으로 렌더링됩니다.
  
  box-sizing 속성으로 박스 크기를 별도 지정하지 않을 경우에는 flex-basis가 flex item의 박스 크기를 결정합니다.
  
  Absolute positioned item은 flex layout을 따르지 않기 때문에 flex-basis 의 영향을 받지 않습니다.
  
  • auto (default value)

 

• flex-grow : flex item의 너비가 늘어나도록 정의
  이 속성은 양수, 정수값을 사용합니다. flex container의 남는 공간 중 flex item에 얼마나 분배해야하는지 결정합니다. flex-grow 값이 1 이상일 때, flex item의 width 나 flex-basis 를 정의하여도 표현되지 않습니다. 
  
  • 0 (default value) : flex container의 크기와 상관없이 늘어나지 않음

 

• flex-shrink : flex item의 너비가 줄어들도록 정의
  • 1 (default value) : flex container의 너비에 따라 flex item들의 너비가 균등하게 줄어듦

 

• flex : flex-grow , flex-shrink , flex-basis 를 한번에 정의
  항상 위 순서가 지켜져야 정상적으로 표현됩니다.
  • flex: 0 1 auto; (default value)

 

• align-self : flex container의 align-items 와 기능적으로 같지만, flex item을 개별적으로 제어 
  • auto (default value)
  • flex-start
  • flex-end
  • stretch
  • center
  • baseline

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

2. Web Club (jaiyah님의 블로그) : https://webclub.tistory.com/628