CSS FlexBox

float

• 이미지와 텍스트를 어떻게 배치할 것인지 정리하기 위해 나타난 아이

 

float: left

• 이미지가 왼쪽에 배치되고 텍스트가 이미지를 감싸면서 배치

 

flex

• 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

 

 

continer를 꾸며줄 수 있는 속성 값들

• display
  • display: flex;
• flex-direction
  • 기본값은 row
  • row-reverse : 오른쪽에서 왼쪽으로
  • column
  • column-reverse
• flex-wrap
  • 기본값 nowrap
    • item이 한줄에 붙어 있음
  • wrap
    • 한 줄에 꽉 차면 다음 줄로 넘어감
• flex-flow
  • column nowrap
  • flex-direction과 flex-wrap 합친 것
• justify-content
  • 중심축에서 item을 어떻게 배치할 지 결정 
  • 기본값은 flex-start
    • 처음부터 왼쪽에서 오른쪽으로 (중심축이 수평축이라면)
  • flex-end
    • 아이템의 순서는 유지하되 오른쪽으로 배치
  • center
  • space-around
  • space-evenly
    • 똑같은 간격을 넣어주는 것
  • space-between
    • 가장 바깥쪽 아이템은 화면의 끝에 배치하고 중간에만 간

• align-items
  • 반대축에서 아이템들을 배치하는 속성값
  • flex 속성 내의 아이템들이 한 줄이라면 align-items를 사용
  • 한 줄을 기준으로 정렬
  • determines how the items as a whole are aligned within the container
  • center
  • baseline
    • 텍스트가 모두 균등하게 배치
• align-content
  • 반대축의 아이템을 지정
  • determines the spacing between lines
  • flex 속성 내의 아이템이 여러줄일 때 사용
  • no-wrap 이라 아이템이 라인을 넘어가지 않아서 계속 한 줄인 상태라면 align-content를 사용해도 적용 안됨
  • space-between
  • center

 

item에 지정되는 속성 값들

• order
• flex-grow
  • 컨테이너를 꽉 채우려고 아이템의 크기를 늘림
• flex-shrink
  • 컨테이너가 점점 작아졌을 때 어떻게 변화하는지 지정
• flex-basis
  • 아이템들이 공간을 얼마나 차지해야하는지 세부적으로 명시하도록 도와줌
  • 기본값 auto
  • 60% (컨테이너의 width에 따라 차지하는 비율)
• align-self
  • item 마다 각각 정렬 
  • center