플렉서블 레이아웃 소개 및 요약 - by. UXKM

요약 설명

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식입니다.
요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있습니다.
복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있습니다.

플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델입니다.
이 레이아웃은 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되어, 웹 페이지의 레이아웃을 언제나 똑같이 유지할 수 있게 해줍니다.

플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같습니다.
display | flex-direction | justify-content | align-items | flex-wrap | flex-flow | align-content

또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같습니다.
order | align-self | flex

flexbox 소개

플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다.

플렉스 컨테이너(flex container)는 해당 HTML 요소의 display 속성을 설정하는 것으로 정의할 수 있습니다.
해당 요소를 블록 타입으로 정의하려면 display 속성값을 flex로, 인라인 타입으로 정의하려면 inline-flex로 설정합니다.
플렉스 컨테이너는 언제나 하나 이상의 플렉스 요소를 포함해야 합니다.

플렉스 컨테이너의 외부와 플렉스 요소의 내부의 모든 것들은 평소처럼 동작합니다.
플렉스 박스(flex box)는 오직 플렉스 요소가 플렉스 컨테이너의 내부에서 어떻게 위치하는가만을 정의합니다.

플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 위치하게 됩니다.
기본적으로 하나의 플렉스 컨테이너는 오직 단 하나의 플렉스 라인만을 가지고 있습니다.

direction 속성을 이용하면 이러한 플렉스 라인(flex line)의 방향을 바꿀 수도 있습니다.
direction 속성값이 rtl(right-to-left)로 설정되면, 페이지 내의 모든 텍스트 요소는 오른쪽에서 왼쪽 방향으로 써집니다.
그와 동시에 플렉스 라인(flex line)의 방향도 바뀌게 되어, 플렉스 요소의 정렬도 오른쪽에서 왼쪽으로 바뀌게 됩니다.

IE계열은 IE8, 9의 경우 지원하지 않고 IE10,11의 경우도 일부 지원하므로 IE계열에서 Flexbox를 사용하기 위해서는 flexibility.js를 사용하면 유용하지만 완벽하게 도움을 주는것은 아닙니다.

Flexbox 속성 요약 설명

[Flexbox 기본 구조]
Flexbox 기본 구조

  1. Flexbox 컨테이너 속성

    display : HTML 요소에 대한 박스의 타입을 명시합니다. flex | inline-flex

    flex-direction : Flex Items의 주 축(main-axis)을 설정합니다. (방향을 설정)

    flex-wrap : Flex Items의 여러 줄 묶음(줄 바꿈) 설정합니다. (flex 라인에 더 이상의 여유 공간이 없을 때, flex 요소의 위치를 다음 줄로 넘길지를 설정)

    flex-flow : flex-direction 속성과 flex-wrap 속성의 축약 표기법 입니다.

    align-content : 교차 축(cross-axis)의 정렬 방법을 설정합니다.(2줄 이상) (flex-wrap 속성의 동작을 변경할 수 있으며, flex 요소를 정렬하는 대신에 flex 라인을 정렬)

    justify-content : 주 축(main-axis)의 정렬 방법을 설정합니다. (flex 요소의 수평 방향 정렬 방식을 설정)

    align-items : 교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.(1줄) (flex 요소의 수직 방향 정렬 방식을 설정)

  2. Flexbox 아이템 속성

    flex-grow : flex item의 너비에 대한 확대 인자(flex grow factor)를 지정합니다.

    flex-shrink : flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정합니다.

    flex-basis : flex item의 너비를 결정합니다.

    flex : flex-grow, flex-shrink, flex-basis 축약 표기법 입니다. 같은 flex 컨테이너 안에 있는 flex 요소의 너비를 상대적으로 설정합니다.

    align-self : flex 요소마다 서로 다른 align 속성값을 설정합니다. Cross Axis에서 단일 항목을 정렬합니다.

    order : flex 컨테이너 안에 있는 flex 요소들의 순서를 설정합니다. 낮은 숫자의 항목은 왼쪽으로 이동하고 높은 숫자의 항목은 오른쪽으로 이동합니다.

flexbox 장점 요약

  1. 1줄의 코드 추가로 수평 정렬이 가능하다.
  2. 요소의 상하좌우 정렬, 순서 변경이 간단하다.
  3. 요소가 간격 조절이 간단하다.
  4. 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.

Flexbox 사용

[Flexbox 용어]
Flexbox terminology diagram from official W3C specification.
Flexbox 속성의 값에 따라 flex 항목은 main axis(기본 축) 또는 cross axis(교차 축)을 따라 flex 컨테이너 안에 배치됩니다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
  1. 값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
  2. 반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
  3. 즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
[주 축(main-axis)과 교차 축(cross-axis)]
주 축(main-axis)과 교차 축(cross-axis)
시작점(flex-start)과 끝점(flex-end)의 개념은 다음과 같습니다.
  1. 이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭합니다.
  2. 역시 방향에 따라 시작점과 끝점이 달라집니다.
[시작점(flex-start)과 끝점(flex-end)]
시작점(flex-start)과 끝점(flex-end)

flexbox를 사용하려면 먼저 부모 컨테이너에 display: flex;속성을 CSS에 추가하여 부모 컨테이너를 flex 컨테이너로 변환해야 합니다.

부모 요소가 inline 요소인 경우 inline-flex을 지정합니다.
flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 됩니다.

Flexbox 예제