CSS 레이아웃 - flex

들어가며

본 글은 국민대학교 임베디드 소프트웨어 동아리 KOBOT의 과제를 위해 개인적인 기록용으로 유노코딩의 CSS 레이아웃 - flex & grid 1~8강 내용을 정리한 포스트입니다.

 

내용

CSS 레이아웃

레이아웃(layout)이란 구성 요소를 공간에 효과적으로 배열하는 일 또는 그 기술을 의미한다.

CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술이다. CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다.

 

대표적인 CSS 레이아웃 기술로 다음 것들을 들 수 있다.

• 일반적인 문서 흐름
• display 속성
• 플렉스박스
• 그리드 레이아웃
• float 속성
• position 속성
• 기타 등등

 

플렉스박스(flexbox)

플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다.

플렉스박스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정된다.

 

플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소

플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

 

플렉스박스 방식을 사용하기 위해 우선적으로 플렉스 컨테이너를 만들어야 하는데 그 방법은 해당 요소에 display: flex;라는 속성을 지정해주면 된다. 이는 기본적으로 박스레벨의 요소이다. 만약 플렉스 컨테이너가 인라인 레벨 요소이길 원한다면 display: inline-flex;로 고쳐주면 된다.

 

주축과 교차축

플렉스박스 방식은 두 개의 축을 제공한다. 그 중 하나의 축을 주축삼아 요소를 배치하는데, 주축의 기본값은 가로방향(왼쪽에서 오른쪽)이다.

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성이다. 행은 가로 축을, 열은 세로 축을 주축으로 한다.

flex-wrap

플렉스 아이템들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성이다.

justify-content

플렉스 아이템들이 플렉스박스 주축을 따라 배치될 때 요소 사이의 공간을 분배하는 방식을 결정한다.

align-items

플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정한다.

align-self

각각의 플렉스 아이템이 교차축에서 어떤 식으로 정렬될 것인지를 결정한다. 각각의 아이템에 개별적으로 추가해주는 속성이다.

align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성이다. 다음 두 조건이 만족되면서 여유 공간이 있을 때만 동작할 수 있다.

• flex-wrap의 값이 wrap으로 지정되어 있을 때
• 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때

flex-grow

플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다.

flex-shrink

플렉스 아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다.

flex-basis

플렉스 아이템의 초기 크기를 지정한다. box-sizing이 따로 설정되지 않는 경우 콘텐츠 박스의 크기를 결정하게 된다. 기본값은 auto이다.

flex

flex는 flex-grow, flex-shrink, flex-basis 순서로 이 세 가자의 속성을 정의할 수 있는 단축 속성이다.

.item{
  /* 200px보다 크거나 작을 수 없다 */
  flex: 0 0 200px;
}

order

플렉스 아이템의 배치 순서를 설정할 수 있으며 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다. 코드에 영향을 끼치는 것이 아닌 보여지는 순서에만 영향을 준다.