[CSS] flex

 

flex의 개념

- 컨텐츠를 정렬, 공간의 구분을 위해 사용하는 속성의 집합

- 레이아웃을 다룰 때 한 번에 하나의 행이나 열만 다룰 수 있음 (1차원 레이아웃 모델)

 

flex의 특징

- display 속성 중 하나(flex, inline-flex)

- Block 레벨요소의 성질을 가짐

- 부모의 속성으로 자식을 컨트롤, but 강제하지는 않음

- 자신의 직계인 자식에게만 영향을 줌

 

flex의 속성

•  flex-direction: 축의 위치 설정, axis를 기준으로 왼쪽에서 오른쪽으로 기본 정렬
  • row: 가로 정렬, 기본 정렬 방향
  • row-reverse: 123순으로 flex-end 부터 정렬, 결론) 321 순으로 보이게 됨
  • column: 세로 정렬(cross axis), 위에서부터 123순
  • column-reverse: 거꾸로 된 세로 정렬 위에서부터 321순

    ---

• justify-content: 현재 정렬 방향을 기준으로 배열의 위치 조정 및 아이템간 간격 설정
  • flex-start

    

  • center

    

  • flew-end

    

  • space-between

    

    box 사이의 간격을 일정하게 조정

  • space-around

    

    box 주위를 동일한 여백이 감싸는 형태, 두 box가 겹치지 않고 여백이 각자 적용

  • space-evenly

    

    box 사이의 여백이 인접하든 안하든 관계없이 동일

 

---

• align-items: cross axis 축을 기준으로 이동
  • stretch (기본값)
  • baseline
  • center
  • flex-start
  • flex-end
• align-content: cross axis 축의 아이템이 여러줄일 경우 사용 가능
  • center
  • flex-start
  • flex-end
• align-self: 하나의 item만 정렬할때 사용, 부모의 속성을 덮고 item 하나에게 개별적인 속성을 container에 부여
• flex-wrap: 자식요소를 감싸는 기능, 자식의 크기를 강제로 조절하지 않음
  • wrap
  • nowrap
  • wrap-reverse
• flex-basis: item의 크기 특정, 자식요소에 사용, width 값에 우선적용, 값이 존재하는 경우 기존의 width, height 무시
• flex-grow: basis 값에서 더 커져도 되는지를 지정, 자식요소에 사용
  • 0 : basis의 크기만큼만 차지
  • 1 : 모두 동일한 크기의 공간 할당
  • 2 : 특정한 하나의 자식에게만 적용, 그 자식에게만 두배의 공간 할당
• flex-shrink : basis 값에서 더 줄어들어도 되는지를 지정
  • 1 : 기본값
  • 0 : 컨테이너의 크기가 줄어도 값은 고정
• order: item간의 우선순위 결정, 마크업상의 변화가 아닌 단순 위치상의 변화, 값이 해당 위치를 뜻하지 X, order 값을 부여받지 못한 애들은 그냥 자리를 지키고, ordering 된 애들끼리 그 뒤에서부터 order 순으로 재배치 됨

 

Reference

• 멋사 FE 스쿨 수업자료
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex
• https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container