flex활용

flex-box 활용법

플렉스박스 레이아웃을 구성하는 요소는 컨테이너와 개별 아이템으로 나뉘어지며, 각각의 요소에 대해서 주로 적용하는 속성은 다음과 같다.

컨테이너

컨테이너는 우선 다음 항목을 적용한다.

.container {
    display: flex;
}

컨테이너 내부 아이템은 자신이 얼마나 늘어나고 줄어들 것인지를 결정한다.

.item {
    flex: 1 0 auto;
}

단일 요소의 가운대 배치

가로 방향으로 이어지는 단일 요소를 가운데로 정렬하고 align-items: center 속성을 부여한다. 이는 진행 축의 직교 방향으로 아이템을 배치하는 방법을 나타낸다.

복수요소의 가운대 배치

복수요소의 세로 가운데 배치는 단일 컨테이터-아이템 구조로는 구현할 수 없고, 각각의 아이템이 이너 컨테이너로 기능해야 한다.