CSS 레이아웃과 Flexbox

레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

셀렉터

• 후손 셀렉터 header p
• 자식 셀렉처 header > p
• 인접 형제 section + p
• 형제 section ~ p

레이아웃

1. 수직 분할
   1. 부모 요소에 display:flex를 준다.
   2. 부모 요소의 flex-direction은 기본으로 row로 되어 있다.
   3. 자식 요소에 flex 속성값의 첫번째, 즉 grow를 이용해 가로 비율을 설정해준다.
      • flex: grow, shrink, basis 기본 형식
      • 기본값은 (0 1 auto)이다. basis의 기본 값은 콘텐츠 크기이다.
      • grow를 이용해 레이아웃을 지정할 경우 shrink는 기본값인 1로 사용하는 것이 좋다
      • basis를 고정값으로 설정해주려면, grow에 0을 주어야 한다.
      • grow를 이용해 비율을 1/n하려면 basis에 0을 주어야 한다.
2. 수평 분할
   1. 부모 요소에 flex-direction: column을 준다.
   2. 위 grow 속성을 적용한다. 이제는 grow가 세로 비율이 된다.

정렬

1. 수직 정렬
   • 부모 요소에 align-items를 준다.
   • 속성값으로 flex-start/end, center, stretch등으로 정렬
2. 수평 정렬
   • 부모 요소에 justify-content를 준다
   • 속성값으로 flex-start/end, center, space-between등으로 정렬

---

참고:
코드스테이츠 유어클래스