1. 인라인 / 블럭요소
-인라인
: content부분만 영역을 차지하고 있는 요소, 옆으로 다른 요소가 올 수 있음
= 딱 자기 공간만 차지
-블럭요소
: 한 줄을 영역으로 차지하고 있는 요소, 옆 칸을 다 차지해버린다.
= 해당 줄을 다 먹는다
2. flex
가장 먼저 부모 태그에 display:flex 먼저 줘야하는데
flex를 주기 전에는 요소들이 block으로 돼있다. 그리고 여기에 flex를 주게 되면 inline요소처럼 정렬된다(같은건 아님)
여기서 flex를 준 태그의 자식요소들은 flex item이 되고
flex item의 특징으로는
- 한줄에 나란히 배치된다. (한 줄에 여러개의 item이 들어감)
- 가로 방향으로 배치(기본값)
# flex-direction: column; 을 쓰면 세로로 배치된다.
주축과 교차축
- 주축 (Main axis): 기본적으로 가로 방향을 의미하고, flex item이 이 축을 따라 배치된다
- 주축의 방향은 flex-direction에 따라서 설정
- flex-direction: row; → 주축은 가로 (기본값) < 대부분..
- flex-direction: column; → 주축은 세로
- 교차축 (Cross axis): 주축과 직각 방향의 축을 의미한다. (주축이 가로면 교차축은 세로)
정렬과 배치
justify - content
: flex item을 주축(main axis) 기준으로 정렬하는 속성 ( 주축이 가로면 flex item이 가로로 어떻게 정렬될지 결정)
- flex-start: 시작점에 정렬 (기본값)
- center: 중앙 정렬
- flex-end: 축의 끝에 정렬
- space-between: 아이템들 사이에 동일한 간격을 둡니다.
align-items
:교차축(cross axis) 기준으로 flex item을 정렬하는 속성 (주축이 세로면 교차축은 가로)
- flex-start: 위쪽 정렬
- center: 중앙 정렬
- flex-end: 아래쪽 정렬
Wrap (줄바꿈)
기본적으로 flex item은 한 줄에 모두 배치되려고 하지만
flex-wrap 속성을 사용하면 부모요소의 공간이 전부 찼을 때 다음 줄로 넘어간다.
- nowrap: 기본값. 모든 item을 한 줄에 배치하려고 시도.
- wrap: 부모 요소가 전부 차면 다음 줄로 넘어갑니다.