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

  • Publishing
  • CSS
  • CSS 고급
  • 플렉서블 레이아웃 소개 및 요약
요약 설명

Flex(Flexbox)는 CSS3에서 도입된 레이아웃 방식으로, 요소의 크기가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 구현할 수 있습니다.
플렉스 컨테이너(부모 요소)와 플렉스 요소(자식 요소)로 구성되며, display: flex 또는 display: inline-flex로 설정한 요소가 플렉스 컨테이너가 됩니다.

복잡한 레이아웃도 적은 코드로 간단하게 표현할 수 있으며, 다양한 화면 크기와 기기에서 요소들이 자동으로 재정렬되어 반응형 웹을 구현하는 데 유용합니다.
과거에는 float이 주로 사용되었지만, 현재는 flex 또는 grid가 주로 사용됩니다.

flexbox 소개

플렉스 박스는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다.
플렉스 컨테이너는 display: flex 또는 display: inline-flex로 설정한 요소이며, 플렉스 요소는 그 안에 포함된 자식 요소입니다.

플렉스 요소는 플렉스 컨테이너 안에서 플렉스 라인(flex line)이라는 가상의 선을 따라 배치됩니다.
기본적으로 하나의 플렉스 컨테이너는 하나의 플렉스 라인만 가지며, direction 속성으로 방향을 변경할 수 있습니다.

과거에는 Internet Explorer 8, 9가 지원하지 않고, IE 10, 11도 일부만 지원하며 모바일 브라우저 외에 활용도가 낮았지만, 현재는 IE를 사용하지 않기 때문에 모든 브라우저에서 문제없이 사용할 수 있습니다.

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 컨테이너로 변환해야 합니다.

참고: 최신 브라우저에서는 display: flex;만 사용하면 충분하며, 아래의 주석 처리된 구식 문법은 레거시 브라우저 지원용으로만 참고하세요.

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

Flexbox 예제