플렉서블 레이아웃 부모 속성 part1 - by. UXKM

  • Publishing
  • CSS
  • CSS 고급
  • 플렉서블 레이아웃 부모 속성 part1
요약 설명

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

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

요약 설명

플렉서블 레이아웃 - 부모 속성 part 1에서는

  • display
  • gap
  • flex-direction
  • flex-wrap
  • flex-flow에 대한 내용을 다루고 있습니다.

부모 속성(Properties for the Parent - Flexbox Container)

display: flex;를 설정한 요소입니다.

[Flexbox Container]
Flexbox Container

display

플렉스 환경을 구성합니다.
페이지 섹션에서 flexbox를 사용하려면 먼저 부모 컨테이너 display: flex;를 CSS에 추가하여 부모 컨테이너를 flex 컨테이너로 변환해야 합니다.
display: flex; 를 할당함으로써 부모 컨테이너에 대해 가로로 배열됩니다. 이렇게 하면 flexbox가 컨테이너 내에서 항목을 기본적으로 왼쪽에서 오른쪽으로 배치합니다.
CSS의 다단 레이아웃(columns) 속성은 플렉스 컨테이너에 적용되지 않습니다.

w3.org/TR/css-flexbox-1/#flex-containers

gap

gap 속성은 플렉스 컨테이너 내에서 플렉스 요소들 사이의 간격을 설정합니다.
이 속성을 사용하면 각 요소에 개별적으로 margin을 적용하지 않고도 일관된 간격을 유지할 수 있습니다.
gap은 row-gap(행 간격)과 column-gap(열 간격)을 한 번에 설정하는 축약형 속성입니다.

w3.org/TR/css-align-3/#propdef-gap

flex-direction

flex-direction 속성은 플렉스 컨테이너 내에서 플렉스 요소가 배치될 주축(main axis) 방향을 설정합니다.
Flexbox에서는 "수평"과 "수직" 대신 주축(main axis)과 교차 축(cross axis)이라는 용어를 사용합니다.

기본값은 row이며, 명시적으로 설정하지 않아도 주축을 따라 플렉스 요소가 왼쪽에서 오른쪽으로 배치됩니다.
column으로 변경하면 주축이 세로 방향이 되어 플렉스 요소가 위에서 아래로 배치됩니다.
이 속성은 플렉스 컨테이너에 지정하며, 모든 플렉스 요소의 흐름 방향을 제어합니다.

float 레이아웃에서는 clearfix를 사용해야 했지만, Flexbox는 display: flex만으로 자동 정렬되므로 clearfix가 필요 없습니다.

w3.org/TR/css-flexbox-1/#flex-direction-property

[flex-direction을 시각적으로 설명하는 다이어그램]
flex-direction을 시각적으로 설명하는 다이어그램

  1. 주측(main axis)과 교차축(cross axis)의 이해

    위 요약에 언급됐듯이 flex에서 수평과 수직은 올바른 용어가 아닙니다. 대신 주축(main axis) 및 교차 축(cross axis)으로 불리며 사용됩니다.
    주축은 flex-direction에 의해 정의되며 4개의 값(row | row-reverse | column | column-reverse)을 가질 수 있습니다.

    row 또는 row-reverse의 주축은 인라인 방향(가로 행)이며, 교차 축은 블록 방향(세로 열)입니다.
    flex-direction:row; 기준 main axis
    column 또는 column-reverse의 주축은 블록 방향(세로 열)이며, 교차 축은 인라인 방향(가로 행)입니다.
    flex-direction:column; 기준 main axis

    flex-direction이 선언되지 않으면 기본값인 row가 적용되므로 주축은 인라인 방향(가로 행)이며, 교차 축은 블록 방향(세로 열)입니다.

  2. row (기본값)

    기본 설정으로, 플렉스 요소가 왼쪽에서 오른쪽으로 배치됩니다.

    flex-direction: row;
    flex-direction: row;

  3. row-reverse

    플렉스 요소가 오른쪽에서 왼쪽으로 배치됩니다.

    flex-direction: row-reverse;
    flex-direction: row-reverse;

  4. column

    플렉스 요소가 위쪽에서 아래쪽으로 배치됩니다.

    flex-direction: column;
    flex-direction: column;

  5. column-reverse

    플렉스 요소가 아래쪽에서 위쪽으로 배치됩니다

    flex-direction: column-reverse;
    flex-direction: column-reverse;

  6. 속성 비교

    row vs column

    1

    2

    3

    4

    column vs column-reverse

    1

    2

    3

    4

[flex-direction 예시]
flex-direction 예시

주측(main axis)과 교차축(cross axis) 예제

flex-wrap

flex-wrap 속성은 플렉스 요소를 한 줄로 배치할지, 여러 줄로 배치할지 결정합니다.
flex 컨테이너의 width보다 flex item들의 width의 합계가 더 큰 경우, 한 줄로 표현할 것인지, 여러 줄로 표현할 것인지를 지정합니다.

w3.org/TR/css-flexbox-1/#flex-wrap-property

[flex-wrap을 시각적으로 설명하는 다이어그램]
flex-direction 예시

  1. nowrap (기본값)

    기본값이며, flex item을 줄바꿈 하지 않고 1행에 배치합니다.

    flex-wrap: nowrap;
    flex-wrap: nowrap;

  2. wrap

    flex item들의 width의 합계가 flex 컨테이너의 width보다 큰 경우 flex item을 복수의 행으로 배치합니다.
    기본적으로 좌에서 우로, 위에서 아래로 배치됩니다.

    flex-wrap: wrap;
    flex-wrap: wrap;

  3. wrap-reverse

    flex-wrap: wrap;과 동일하나 아래에서 위로 배치됩니다.

    flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;

flex-wrap 예제

flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 shorthand입니다.
기본값은 row nowrap입니다.

w3.org/TR/css-flexbox-1/#flex-flow-property

[수평 언어(영어), 수직 언어(일본어)의 배치와 방향 차이를 보여주는 이미지]
수평 언어(영어), 수직 언어(일본어)의 배치와 방향 차이를 보여주는 이미지

flex-flow 예제