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

요약 설명 플렉서블 레이아웃 - 부모 속성 part 1 에서는
- display
- flex-direction
- flex-wrap
- flex-flow
 에 대한 내용을 다루고 있습니다.

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

display: flex;를 설정한 엘리먼트 입니다

[Flexbox Container]
Flexbox Container

display

플렉스 서식 환경을 구성합니다.
페이지 섹션에서 flexbox를 사용하려면 먼저 부모 컨테이너 display: flex;를 CSS 에 추가하여 부모 컨테이너를 flex 컨테이너로 변환해야 합니다.
display: flex; 를 할당함으로써 부모 컨테이너에 대해 가로로 배열됩니다. 이것은 기본적으로 flexbox가 컨테이너에서 왼쪽에서 오른쪽으로 이동하는 항목을 표시 함을 보여줍니다.
CSS 열은 플렉스 컨테이너에 영향을 미치지 않습니다.

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

flex-direction

방향, 흐름, 시각적인 순서를 처리합니다.

flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 주축(main axis) 방향을 설정합니다.
기술적으로, "수평(horizontal)"과 "수직(vertical)"은 "flex world"에서는 올바른 용어가 아니며, 이것은 주축(main axis) 및 교차 축(cross axis)으로 불립니다.
기본적으로 flex-direction 속성은 행(row)으로 설정되고 주축을 따라 플렉스 아이템을 정렬합니다.

flex-direction 속성이 명시적으로 설정되지 않았더라도 기본값인 행(row)을 사용 합니다.
flex-direction 속성이 열(column)로 변경되면 플렉스 아이템이 교차 축을 따라 정렬됩니다.(왼쪽에서 오른쪽으로가 아니라 위에서 아래로 채워집니다.)
flex-direction은 플렉스 항목들의 흐름 방향을 전체적으로 제어하기 때문에 플렉스 항목이 아닌 플렉스 컨테이너에 지정해야 합니다.
그리고 float 레이아웃을 사용할 때는 변칙적인 clear 속성을 이용해 부모가 자식을 감싸주도록 하는 방법을 사용했지만
플렉스 박스는 컨테이너 요소에 display: flex; 만 주게 되면 마치 모든 아이템에 float 를 정의해 준 것처럼 배치가 되면서 굳이 불필요하게 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 item을 1행으로 또는 복수행으로 배치할지를 결정합니다.(Items의 줄 바꿈 설정)
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 예제