강의 목표

• flexbox의 개념
• container와 item에서 사용할 수 있는 프로퍼티

flexbox

• 부모 요소인 flex container
  • 프로퍼티
    • flex-drection
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
• 자식 요소인 flex item
  • 프로퍼티
    • flex
    • flex-grow
    • flex-shrink
    • flex-basis
    • order
• flexbox를 사용하려면 display : flex를 추가해야 한다.
• flexbox의 핵심은 줄을 세운다는 것이다.

flex container : flex - direction

• flex-difection을 따로 값을 지정하지 않으면 row값이 기본으로 배정된다.
• 값
  • row
  • column
  • row - reverse
  • column - reverse

flex container : flex - wrap

• item을 여러줄로 나열하게 함
  • 기존에는 container의 크기가 작다면 item의 크기를 지정해줘도 container의 크기에 맞춰서 작아졌다

flex container : flex - flow

• direction,flow를 한번에 쓸 수 있다.

  flex-flow : column wrap;