Day 3 . 페이지 레이아웃

레이아웃 리셋

• 설정한 레이아웃을 적용하기 위해 기본 레이아웃을 리셋

Flexbox

- display : flex

• 부모요소에서 호출
• 자식 박스의 방향과 크기를 결정
• justify-content : 가로선 상 정렬
  • flex-start : 왼쪽 정렬 ( default )
  • flex-end : 오른쪽 정렬
  • center : 가운데 정렬
  • space-between : 요소 사이에 동일 간격
  • space-around : 요수 주위에 동일 간격
• align-items : 세로선 상 정렬
  • flex-start : 꼭대기 정렬 ( default )
  • flex-end : 바닥 정렬
  • center : 세로선 상 가운데 정렬
  • stretch : 컨테이너에 맞도록 정렬
• align-content : 세로선 상 공간이 있는 경우 Flex 컨테이너 사이 간격 조정
  • 인자는 align-items와 같음
• flex-direction : 정렬 방향 지정
  • row : 텍스트 방향과 동일하게 정렬
  • row-reverse : 텍스트 방향과 반대로 정렬
  • column : 위에서 아래로 정렬
  • column-reverse : 아래서 위로 정렬
• flex-wrap : flex요소를 한 줄 또는 여러 줄에 걸쳐 정렬
  • no-wrap : 한 줄 정렬 ( default )
  • wrap : 여러 줄 정렬
  • wrap-reverse : 여러 줄 반대로 정렬
• flex-flow : 위의 속성 값을 여러 개 받을 수 있음

- flex : grow shrink basis

• grow
  • 부모 박스 안에 각 자식 박스가 갖는 grow의 총합이 n이라면, 자식 박스의 가로 혹은 세로 길이를 grow / n의 비율로 설정됨
  • ex) 세 개의 박스의 grow가 1,2,3이라면 grow=1인 박스는 1/6 비율의 크기로 생성
  • 모두 같은 1 이상의 grow 값을 가질 경우 모두 같은 비율의 박스가 생성
• shrink
  • grow와 반대로 설정 비율에 대해 줄어듦
  • width나 basis에 따른 비율을 계산해야 하기 때문에 복잡 --> 사용 지양 , grow 권장
• basis
  • 자식 박스가 grow나 shrink에 의해 크기가 변하기 전의 기본 크기
  • grow = 0으로 지정해줘야 basis 값이 적용됨
  • basis와 width가 동시에 적용할 때 basis가 width 값보다 먼저 적용됨
  • grow 값을 적용하려면 basis = auto