CSS를 이용해 Box를 만들면 기본적으로 display: block이 된다. block속성의 특징은 옆으로 무언가가 올 수 없기 때문에 한줄을 다 사용하게 된다. 그에 반해, inline속성은 옆에 무언가를 둘 수 있지만, Box처럼 width나 height을 사용할 수 없다.
Box를 수평으로 두고 싶을 때는 display: inline-block을 사용해주면 된다. 말 그대로 block속성을 가진 box를 inline하게 정렬할 수 있다.
만약 box에 display를 inline으로 주면 오류를 내는데, 그 이유는 Box에 이미 width와 height속성이 부여되어있기 때문이다.
여러개의 박스를 감싸는 Container에 display: flex를 해주어야 flex로 레이아웃을 만들 수 있다.
Flex-box에서는 특히 방향이 중요하다. Row는 행으로 가로줄을 말하고, Column은 열로 세로줄을 말한다.
또한, Flex-box의 기본방향(main-axis)는 Row방향(수평축)을 중심으로 하고, cross axis는 Column방향(수직축)을 중심으로 한다.
만약 임의로 direction: column을 해준다면, main-axis는 Column방향이 되고, cross axis는 Row방향이 된다. (서로 바뀜)
: main-axis를 중심으로 자식요소들의 위치를 변경할 수 있다.
: 모든 자식요소가 가운데로 정렬된다.
: 자식요소들이 같은 여백을 가지고 떨어진다.
: 자식요소의 좌우여백을 같게 한다.
: cross-axis를 중심으로 자식요소들의 위치를 변경할 수 있다.
: align-items의 기본설정값.
: cross-axis의 끝에 자식요소를 둔다.
: 부모요소의 크기만큼 자식요소를 늘린다.
: align-items와 동일하게 작동하지만 자식요소들을 하나씩 움직이고 싶을때 자식요소에 속성을 부여하여 사용.