css 레이아웃으로 flex와 grid가 많이 사용된다. 뭐가 더 좋다기 보다는 상황에 맞게 잘 사용하면 된다.

flex는 부모요소와 자식요소에게 적용할 수 있는 속성이 나누어져 있다. 부모요소에 flex속성을 적용하면 자식요소들에 변화가 생긴다! 명심하자.

여기서 부모는 Container라 칭하고, 자식은 item이라 칭하겠다.

부모(Container)에 적용 가능한 속성

1. display : flex

display 속성에서 flex옵션은 flex를 시작하기 위한 기본적인 설정이고, 기본적으로 row 방향으로 설정이 된다.

비슷한 시작 옵션으로 inline-flex가 있는데, 이 옵션을 적용시키면 container의 크기가 item들의 크기에 맞춰진다. 즉 inline으로 설정이 된다.

.container {
	display: flex; 
	display: inline-flex;
}

2. flex-direction

flex-direction 속성은 item들의 기본 방향을 설정할 수 있다. display:flex를 하면 기본적으로 row가 설정된다.

.container{
	flex-direction: row;
	flex-direction: column;
	flex-direction: row-reverse;
	flex-direction: column-reverse;
}