[CSS] Flex container 속성

 

Flex container 속성

 

---

 

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

 

• display: flex; : 부모 요소에 설정하여 새로운 플렉스 서식 환경을 구성

 

• flex-direction : flex item들이 정렬되는 축 방향 변경
  • row (default value)
  • row-reverse
  • column
  • column-reverse

 

• flex-wrap : flex item들의 총 넓이가 flex container의 넓이보다 클 때, flex item들을 다음 줄에 이어서 정렬
  • nowrap (default value)
  • wrap
  • wrap-reverse

 

• flex-flow : flex-direction , flex-wrap 를 한번에 정의
  항상 위 순서가 지켜져야 정상적으로 표현됩니다.
  • flex-flow: row nowrap; (default value)

 

• justify-content :  flex item을 main axis를 기준으로 어떻게 정렬할 것인지 결정
  
  • flex-start (default value)
  • flex-end
  • start
  • end
  • center
  • space-between
  • space-around
  • space-evenly
  • stretch

 

• align-items : flex item을 cross axis를 기준으로 어떻게 정렬할 것인지 결정
  • stretch (default value)
  • flex-start
  • flex-end
  • start
  • end
  • center
  • baseline

 

• align-content : flex item이 정렬된 라인들을 어떻게 정렬할 것인지 결정
  (flex item들이 정렬된) 라인이 두 개 이상일 때 부터 효과가 발생하기 때문에 flex-wrap: wrap; 인 상태에서 사용 가능합니다. 
  
  • stretch (default value)
  • flex-start
  • flex-end
  • start
  • end
  • center
  • space-between
  • space-around
  • space-evenly

 

 

 

 

 

※ 참고자료

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

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

3. 고지은고 (letsgojieun님의 블로그) : https://letsgojieun.tistory.com/49