Grid System

HTML / CSS 배치

배치 핵심
: 왼쪽 위에 쌓인다 (박스모델)
- 어떻게?
  - block
  - inline
배치 흐름을 바꾸는 방법
- float
- position
  - flex: flexible box

flex

flex 이전에는 배치를 위해서 float , position 지정을 해야했음

flex 주요 개념

container
item

<style>
    .container {
        display: flex;
    }
</style>


<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

축
- main axis
  : 주축
  - flex-direction: row; 일 때 가로 축
  - flex-direction: column; 일 때 세로 축
  - flex-direction: column-reverse; 일 때 밑에서 위로 올라가는 세로 축
  - flex-direction: row-reverse; 일 때 오른쪽에서 왼쪽으로 가는 가로 축
- cross axis
  : 크로스축

flex 정의 시

모든 항목들은 main axis (주축)을 기준으로 배치가 시작됨
- 기본은 row
- 만약, row-reverse로 지정하게 되면, 오른쪽 끝부터 배치가 시작됨
모든 item은 기본적으로 row를 기준으로 배치됨
- flex-direction : row 값으로 기본 설정 됨
모든 item은 cross axis를 모두 채운다
- 높이를 모두 채운다
  - align-items: stretch; 가 기본값이기 때문
모든 item은 본인의 너비 혹은 content 영역만큼 너비를 가지게 된다
- 경우에 따라서, 본인이 지정받은 너비보다 작을 수 있다
  - flex-wrap: nowrap 이 기본값이기 때문
  - ex) 전체 item의 너비의 합이 container의 너비보다 작을 때 보다 작을 때
각 영역은 content 크기 / 너비만큼 영역을 차지함
- 더 작을 수도 있음!
모든 영역은 cross axis (크로스 축)을 채우고 있는 모습임