구글 블로그 만들기

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 …

flex-direction 플렉스 컨테이너를 지정했다면 플렉스 항목을 배열할 방향을 알려주어야 합니다. flex-direction 속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다.

flex-wrap 기본적으로 플렉스 컨테이너 안의 플렉스 아이템들은 한 줄로 배치됩니다. 하지만 flex-wrap 속성을 사용하면 여러 줄로 배치할 수 있습니다.

justify-content justify-content는 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정하고 flex-direction의 값이 column…

align-content flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-conten…

align-items align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 기본값은 stretch로, 컨테이너의 높이에 맞게 늘립니다.

align-self align-self 속성을 이용하면 특정 플렉스 아이템을 개별적으로 배치할 수 있습니다. 플렉스 컨테이너에서 아이템 전체의 배치 방법을 결정하지만 align-self 속성으로 특정 아이템의 배치 방법을 변경할 수 있습니다.

order 플렉스 아이템은 입력한 순서대로 배치되지만 order 속성으로 플렉스 아이템의 순서를 정할 수 있습니다.