학습목표

• Flex-box 이해
• Flex-box 실습
• twittler

Flex-box란?

Flex-box

• 박스를 유연하게 늘리거나 줄여 레이아웃을 구성하는 방법
• 기존의 정렬 방법은 어려웠으나, Flexbox 등장 이후 정렬작업이 용이해짐
• Flex-box는 부모를 통해 자식을 통제, display : flex라는 속성 추가를 통해 정렬
  
• Flex-box 유의할 점 부모와 자식 요소에 대해 적절한 위치에 속성을 지정해주지 않으면 원하는 대로 정렬되지 않음

부모측 속성

• 자식 요소의 정렬 방향 결정
• flex-direction : 자식 요소의 정렬 방향 main-axis 설정
• flex-wrap : 하위 요소가 상위 요소의 크기를 넘어서는 경우 줄 바꿈 설정
• justify-content : main-axis 방향에 대해 자식 요소 정렬 방법 결정
• align-items : cross-axis 방향에 대해 자식 요소 정렬 방법 결정

자식측 속성

• flex : 세가지 속성 설정 가능 팽창지수, 수축 지수, 기본 크기
  • default value -> flex : 0 1 auto
  • 팽창 지수 (grow) : 남은 공간 비율에 대해 요소가 얼마나 늘어날 것인가
  • 수축 지수 (shrink) : 설정한 비율만큼 박스가 작아짐, 비율
  • 기본 크기 (basis) : 박스의 기본 크기, 늘어나거나 줄어들기 이전의 크기
  • 팽창 지수와 수축 지수를 동시에 사용하는 것을 권장하지 않음

Flexbox Froggy 해결

twittler

• Twitter크기가 커지거나 작아질 경우 버튼 및 레이아웃의 변경되는 문제가 있습니다.