1. 소개

이 섹션은 규범적이지 않습니다.

CSS 2.1은 네 가지 레이아웃 모드를 정의했습니다 — 박스의 형제 및 조상 박스와의 관계에 따라 박스의 크기와 위치를 결정하는 알고리즘입니다:

• 블록 레이아웃, 문서 레이아웃에 적합

• 인라인 레이아웃, 텍스트 레이아웃에 적합

• 테이블 레이아웃, 2차원 데이터를 표 형식으로 배치

• 포지셔닝 레이아웃, 다른 요소와의 관계를 크게 고려하지 않고 명시적으로 배치

이 모듈은 새로운 레이아웃 모드인 플렉스 레이아웃을 도입합니다. 이는 보다 복잡한 애플리케이션과 웹페이지 레이아웃을 위해 설계되었습니다.

1.1. 개요

이 섹션은 규범적이지 않습니다.

플렉스 레이아웃은 표면적으로 블록 레이아웃과 비슷합니다. 플렉스 레이아웃에서는 float나 column과 같이 블록 레이아웃에서 사용되는 복잡한 텍스트 중심 또는 문서 중심 속성이 많이 없습니다. 대신에 플렉스는 공간 분배와 콘텐츠 정렬을 위한 간단하고 강력한 도구를 제공하여 웹 앱과 복잡한 웹페이지에서 자주 필요한 기능을 제공합니다. 플렉스 컨테이너의 내용은 다음과 같습니다:

• 어떤 플로우 방향으로든 배치될 수 있습니다 (왼쪽, 오른쪽, 아래, 심지어 위쪽도 가능!)

• 디스플레이 순서를 반전하거나 'order|재배열'할 수 있습니다. (즉, 시각적 순서가 소스 및 음성 순서와 독립적일 수 있음)

• 단일 (메인) 축을 따라 선형으로 배치하거나, 보조 (래핑) 축을 따라 여러 줄로 배치할 수 있습니다 (크로스 축)

• “플렉스” 크기로 사용 가능한 공간에 대응할 수 있습니다

• 컨테이너나 서로에 대해 보조 (크로스) 축을 기준으로 정렬할 수 있습니다

• 동적으로 축소 또는 축소 해제할 수 있으며, 메인 축을 따라 컨테이너의 크로스 크기를 유지합니다

다음은 각 항목에 제목, 사진, 설명, 구매 버튼이 있는 카탈로그의 예시입니다. 디자이너의 의도는 각 항목이 동일한 전체 크기를 갖고, 사진은 텍스트 위에 위치하며, 구매 버튼은 항목 설명의 길이에 상관없이 하단에 정렬되는 것입니다. 플렉스 레이아웃은 이러한 디자인을 쉽게 만듭니다:

• 카탈로그는 플렉스 레이아웃을 사용해 항목의 행을 수평으로 배치하고, 행의 항목들이 모두 같은 높이가 되도록 합니다. 각 항목은 자체적으로 컬럼 플렉스 컨테이너로, 내부 콘텐츠를 수직으로 배치합니다.

• 각 항목 내에서는 원본 문서 콘텐츠가 논리적으로 정렬되어 제목이 먼저 나오고 그 다음에 설명과 사진이 나옵니다. 이는 음성 렌더링이나 CSS를 지원하지 않는 브라우저에서 적합한 순서를 제공합니다. 더 매력적인 시각적 표현을 위해 order를 사용하여 이미지를 콘텐츠 내 뒤쪽에서 위쪽으로 끌어올리고, align-self로 이미지를 수평 중앙에 배치합니다.

• 구매 버튼 위에 auto 마진을 주어 버튼을 각 항목 박스의 하단으로 밀어줍니다. 이는 항목 설명의 높이에 관계없이 동작합니다.

#deals {
  display: flex;        /* 플렉스 레이아웃으로 항목들이 동일한 높이를 가짐  */
  flex-flow: row wrap;  /* 여러 줄로 래핑 허용 */
}
.sale-item {
  display: flex;        /* 각 항목을 플렉스 레이아웃으로 배치 */
  flex-flow: column;    /* 항목 내부를 수직으로 배치  */
}
.sale-item > img {
  order: -1;            /* 이미지의 시각적 순서를 앞쪽으로 이동 */
  align-self: center;   /* 이미지를 크로스 방향(수평) 중앙에 배치         */
}
.sale-item > button {
  margin-top: auto;     /* auto 상단 마진으로 버튼을 하단으로 밀어줌 */
}

<section id="deals">
  <section class="sale-item">
    <h1>컴퓨터 스타터 키트</h1>
    <p>이것은 예산이 많지 않은 사람에게 최고의 컴퓨터입니다.
    <ul>
      <li>컴퓨터
      <li>모니터
      <li>키보드
      <li>마우스
    </ul>
    <img src="images/computer.jpg"
         alt="구성품: 흰색 컴퓨터와 일치하는 주변기기.">
    <button>지금 구매</button>
  </section>
  <section class="sale-item">
    …
  </section>
  …
</section>

컴퓨터 스타터 키트

이것은 예산이 많지 않을 때 최고의 컴퓨터입니다.

• 컴퓨터
• 모니터
• 키보드
• 마우스

프린터

ASCII 아트만 인쇄 가능.

• 종이와 잉크는 포함되지 않음.

지금 구매

지금 구매

1.2. 모듈 상호작용

이 모듈은 display 속성의 정의를 확장합니다 [CSS2], 새로운 블록 수준 및 인라인 수준 display 타입을 추가하고, 새로운 형식화 컨텍스트와 그 레이아웃을 제어하는 속성을 정의합니다. 이 모듈에서 정의된 속성은 ::first-line 또는 ::first-letter 의사 요소에는 적용되지 않습니다.

CSS 박스 정렬 모듈은 여기서 소개된 정렬 속성의 정의를 확장 및 대체합니다 (justify-content, align-items, align-self, align-content) 등입니다.

1.3. 값 정의

이 명세는 CSS 속성 정의 규약을 [CSS2]에서 따르며, 값 정의 문법을 [CSS-VALUES-3]에서 사용합니다. 이 명세에 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 결합으로 이러한 값 타입의 정의가 확장될 수 있습니다.

각 속성 정의에 나열된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드도 속성 값으로 허용합니다. 가독성을 위해 별도로 반복하지 않았습니다.

2. 플렉스 레이아웃 박스 모델과 용어

플렉스 컨테이너는 요소가 display가 flex 또는 inline-flex로 계산된 경우 생성되는 박스입니다. 플렉스 컨테이너의 플로우 내 자식은 플렉스 아이템이라 하며 플렉스 레이아웃 모델로 배치됩니다.

블록과 인라인 레이아웃은 블록 및 인라인 플로우 방향에 편향되어 레이아웃 계산이 이루어지지만, 플렉스 레이아웃은 플렉스 방향에 편향되어 있습니다. 플렉스 레이아웃을 설명하기 쉽게, 이 섹션에서는 플렉스 플로우 기준 용어를 정의합니다. flex-flow 값과 writing mode가 이러한 용어들이 물리적 방향(상/우/하/좌), 축(수직/수평), 크기(너비/높이)에 어떻게 매핑되는지를 결정합니다.

main axis

main dimension

플렉스 컨테이너의 메인 축은 플렉스 아이템이 배치되는 주 축입니다. 메인 차원을 따라 확장됩니다.

main-start

main-end

플렉스 아이템은 컨테이너 내에서 main-start 측에서 시작하여 main-end 측을 향해 배치됩니다.

main size

main size property

플렉스 컨테이너 또는 플렉스 아이템의 메인 크기는 너비 또는 높이 중 메인 차원에 해당하는 값을 의미합니다. 메인 크기 속성은 width 또는 height 속성 중 메인 차원의 속성입니다. 최소 및 최대 메인 크기 속성도 각각 min-width/max-width 또는 min-height/max-height 속성 중 메인 차원에 해당하는 속성이며, 최소/최대 메인 크기를 결정합니다.

플렉스 레이아웃에서는 메인 크기가 flex 속성에 의해 제어되며 메인 크기 속성에 의해 직접 제어되지 않습니다.

참고: 이는 플렉스 아이템의 메인 차원에서 사용 크기를 참조할 때 (width, height, inline size, block size)는 플렉싱 이후의 메인 크기를 의미합니다.

cross axis

cross dimension

메인 축과 수직인 축을 크로스 축이라 합니다. 크로스 차원을 따라 확장됩니다.

cross-start

cross-end

플렉스 줄은 아이템으로 채워져 컨테이너에 배치되며 플렉스 컨테이너의 cross-start 측에서 시작하여 cross-end 측을 향해 배치됩니다.

cross size

cross size property

플렉스 컨테이너 또는 플렉스 아이템의 크로스 크기는 너비 또는 높이 중 크로스 차원에 해당하는 값을 의미합니다. 크로스 크기 속성은 width 또는 height 속성 중 크로스 차원에 해당하는 속성입니다. 최소 및 최대 크로스 크기 속성도 각각 min-width/max-width 또는 min-height/max-height 속성 중 크로스 차원에 해당하는 속성이며, 최소/최대 크로스 크기를 결정합니다.

이 명세에서 사용하는 추가적인 크기 용어는 CSS 고유 및 외적 크기에서 정의됩니다. [CSS-SIZING-3]

3. 플렉스 컨테이너: flex 및 inline-flex display 값

flex

이 값은 요소가 플렉스 컨테이너 박스를 생성하게 하며, 플로우 레이아웃에 배치될 때 블록 레벨이 됩니다.

테스트

• baseline-synthesis-001.html (실시간 테스트) (source)
• baseline-synthesis-002.html (실시간 테스트) (source)
• baseline-synthesis-003.html (실시간 테스트) (source)
• baseline-synthesis-004.html (실시간 테스트) (source)
• baseline-synthesis-vert-lr-line-under.html (실시간 테스트) (source)
• display-flex-001.htm (실시간 테스트) (source)
• dynamic-change-simplified-layout-002.html (실시간 테스트) (source)
• dynamic-change-simplified-layout.html (실시간 테스트) (source)
• fixedpos-video-in-abspos-quirk-crash.html (실시간 테스트) (source)
• flexbox_flex-0-0-0.html (실시간 테스트) (source)
• flexbox_flex-0-0-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-0-0-1-unitless-basis.html (실시간 테스트) (source)
• flexbox_flex-0-0-auto.html (실시간 테스트) (source)
• flexbox_flex-0-0-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-0.html (실시간 테스트) (source)
• flexbox_flex-0-0-N.html (실시간 테스트) (source)
• flexbox_flex-0-0-Npercent.html (실시간 테스트) (source)
• flexbox_flex-0-0-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-0-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-0-N-unitless-basis.html (실시간 테스트) (source)
• flexbox_flex-0-1-0.html (실시간 테스트) (source)
• flexbox_flex-0-1-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-0-1-1-unitless-basis.html (실시간 테스트) (source)
• flexbox_flex-0-1-auto.html (실시간 테스트) (source)
• flexbox_flex-0-1-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-1.html (실시간 테스트) (source)
• flexbox_flex-0-1-N.html (실시간 테스트) (source)
• flexbox_flex-0-1-Npercent.html (실시간 테스트) (source)
• flexbox_flex-0-1-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-1-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-1-N-unitless-basis.html (실시간 테스트) (source)
• flexbox_flex-0-auto.html (실시간 테스트) (source)
• flexbox_flex-0-N-0.html (실시간 테스트) (source)
• flexbox_flex-0-N-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-0-N-auto.html (실시간 테스트) (source)
• flexbox_flex-0-N-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-N.html (실시간 테스트) (source)
• flexbox_flex-0-N-N.html (실시간 테스트) (source)
• flexbox_flex-0-N-Npercent.html (실시간 테스트) (source)
• flexbox_flex-0-N-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-0-N-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-0-0.html (실시간 테스트) (source)
• flexbox_flex-1-0-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-1-0-auto.html (실시간 테스트) (source)
• flexbox_flex-1-0-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-0.html (실시간 테스트) (source)
• flexbox_flex-1-0-N.html (실시간 테스트) (source)
• flexbox_flex-1-0-Npercent.html (실시간 테스트) (source)
• flexbox_flex-1-0-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-0-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-1-0.html (실시간 테스트) (source)
• flexbox_flex-1-1-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-1-1-auto.html (실시간 테스트) (source)
• flexbox_flex-1-1-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-1.html (실시간 테스트) (source)
• flexbox_flex-1-1-N.html (실시간 테스트) (source)
• flexbox_flex-1-1-Npercent.html (실시간 테스트) (source)
• flexbox_flex-1-1-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-1-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-N-0.html (실시간 테스트) (source)
• flexbox_flex-1-N-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-1-N-auto.html (실시간 테스트) (source)
• flexbox_flex-1-N-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-N.html (실시간 테스트) (source)
• flexbox_flex-1-N-N.html (실시간 테스트) (source)
• flexbox_flex-1-N-Npercent.html (실시간 테스트) (source)
• flexbox_flex-1-N-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-1-N-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-0-0.html (실시간 테스트) (source)
• flexbox_flex-N-0-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-N-0-auto.html (실시간 테스트) (source)
• flexbox_flex-N-0-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-0.html (실시간 테스트) (source)
• flexbox_flex-N-0-N.html (실시간 테스트) (source)
• flexbox_flex-N-0-Npercent.html (실시간 테스트) (source)
• flexbox_flex-N-0-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-0-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-1-0.html (실시간 테스트) (source)
• flexbox_flex-N-1-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-N-1-auto.html (실시간 테스트) (source)
• flexbox_flex-N-1-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-1.html (실시간 테스트) (source)
• flexbox_flex-N-1-N.html (실시간 테스트) (source)
• flexbox_flex-N-1-Npercent.html (실시간 테스트) (source)
• flexbox_flex-N-1-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-1-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-N-0.html (실시간 테스트) (source)
• flexbox_flex-N-N-0-unitless.html (실시간 테스트) (source)
• flexbox_flex-N-N-auto.html (실시간 테스트) (source)
• flexbox_flex-N-N-auto-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-N.html (실시간 테스트) (source)
• flexbox_flex-N-N-N.html (실시간 테스트) (source)
• flexbox_flex-N-N-Npercent.html (실시간 테스트) (source)
• flexbox_flex-N-N-Npercent-shrink.html (실시간 테스트) (source)
• flexbox_flex-N-N-N-shrink.html (실시간 테스트) (source)
• flexbox_flex-formatting-interop.html (실시간 테스트) (source)
• flexbox_generated-flex.html (실시간 테스트) (source)
• flexbox_generated.html (실시간 테스트) (source)
• flexbox_generated-nested-flex.html (실시간 테스트) (source)
• flexbox-iframe-intrinsic-size-001.html (실시간 테스트) (source)
• flexbox_item-bottom-float.html (실시간 테스트) (source)
• flexbox_item-clear.html (실시간 테스트) (source)
• flexbox_item-float.html (실시간 테스트) (source)
• flexbox_item-top-float.html (실시간 테스트) (source)
• flexbox_item-vertical-align.html (실시간 테스트) (source)
• flexbox_block.html (실시간 테스트) (source)
• flexbox_box-clear.html (실시간 테스트) (source)
• flexbox_display.html (실시간 테스트) (source)
• flexbox_fbfc2.html (실시간 테스트) (source)
• flexbox_fbfc.html (실시간 테스트) (source)
• flexbox_nested-flex.html (실시간 테스트) (source)
• flexbox-root-node-001a.html (실시간 테스트) (source)
• flexbox-root-node-001b.html (실시간 테스트) (source)
• flexbox_stf-fixpos.html (실시간 테스트) (source)
• flexbox_stf-float.html (실시간 테스트) (source)
• flexbox_stf-inline-block.html (실시간 테스트) (source)
• flexbox_stf-table-caption.html (실시간 테스트) (source)
• flexbox_stf-table-cell.html (실시간 테스트) (source)
• flexbox_stf-table.html (실시간 테스트) (source)
• flexbox_stf-table-row-group.html (실시간 테스트) (source)
• flexbox_stf-table-row.html (실시간 테스트) (source)
• flexbox_stf-table-singleline-2.html (실시간 테스트) (source)
• flexbox_stf-table-singleline.html (실시간 테스트) (source)
• flexbox_table-fixed-layout.html (실시간 테스트) (source)
• flexbox-with-multi-column-property.html (실시간 테스트) (source)
• flexbox_computedstyle_display.html (실시간 테스트) (source)
• grid-flex-item-001.html (실시간 테스트) (source)
• grid-flex-item-002.html (실시간 테스트) (source)
• grid-flex-item-003.html (실시간 테스트) (source)
• grid-flex-item-004.html (실시간 테스트) (source)
• grid-flex-item-005.html (실시간 테스트) (source)
• grid-flex-item-006.html (실시간 테스트) (source)
• grid-flex-item-007.html (실시간 테스트) (source)
• flexbox_interactive_flex-transitions.html (manual test) (source)
• flexbox_interactive_order-transitions-2.html (manual test) (source)
• flexbox_interactive_order-transitions.html (manual test) (source)
• nested-flex-image-loading-invalidates-intrinsic-sizes.html (실시간 테스트) (source)
• percentage-margins-001.html (실시간 테스트) (source)
• stretch-after-sibling-size-change.html (실시간 테스트) (source)
• stretched-child-in-nested-flexbox-001.html (실시간 테스트) (source)
• stretched-child-in-nested-flexbox-002.html (실시간 테스트) (source)
• stretched-child-in-nested-flexbox-003.html (실시간 테스트) (source)
• stretched-child-shrink-on-relayout.html (실시간 테스트) (source)
• stretch-flex-item-checkbox-input.html (실시간 테스트) (source)
• stretch-flex-item-radio-input.html (실시간 테스트) (source)
• stretching-orthogonal-flows.html (실시간 테스트) (source)
• table-with-percent-intrinsic-width.html (실시간 테스트) (source)

inline-flex

이 값은 요소가 플렉스 컨테이너 박스를 생성하게 하며, 플로우 레이아웃에 배치될 때 인라인 레벨이 됩니다.

테스트

• flexbox_inline.html (실시간 테스트) (source)
• flex-inline.html (실시간 테스트) (source)
• flexbox_inline-float.html (실시간 테스트) (source)
• inline-flexbox-absurd-block-size-crash.html (실시간 테스트) (source)
• inline-flexbox-wrap-vertically-width-calculation.html (실시간 테스트) (source)
• inline-flex-editing-crash.html (실시간 테스트) (source)
• inline-flex-editing-with-updating-text-crash.html (실시간 테스트) (source)
• inline-flex-frameset-main-axis-crash.html (실시간 테스트) (source)
• inline-flex.html (실시간 테스트) (source)
• inline-flex-min-content-height.html (실시간 테스트) (source)
• flexbox_computedstyle_display-inline.html (실시간 테스트) (source)
• intrinsic-width-orthogonal-writing-mode.html (실시간 테스트) (source)

플렉스 컨테이너는 그 내용에 대해 새로운 플렉스 포매팅 컨텍스트를 생성합니다. 이는 블록 포매팅 컨텍스트를 생성하는 것과 동일하지만, 블록 레이아웃 대신 플렉스 레이아웃이 사용됩니다. 예를 들어, 플롯(float)이 플렉스 컨테이너 안으로 침범하지 않으며, 플렉스 컨테이너의 마진이 자식의 마진과 병합되지 않습니다. 플렉스 컨테이너는 블록 컨테이너와 정확히 동일하게 자식에 대한 포함 블록을 형성합니다. [CSS2] overflow 속성은 플렉스 컨테이너에 적용됩니다.

플렉스 컨테이너는 블록 컨테이너가 아니므로, 블록 레이아웃을 전제로 설계된 일부 속성들은 플렉스 레이아웃에서는 적용되지 않습니다. 특히:

• float와 clear는 flex item에 대해 부동(float) 또는 클리어런스(clearance)를 생성하지 않으며, 플로우에서 제외시키지 않습니다.

• vertical-align은 플렉스 아이템에 아무런 효과가 없습니다.

• ::first-line 및 ::first-letter 의사 요소는 플렉스 컨테이너에 적용되지 않으며, 플렉스 컨테이너는 조상에게 첫 번째 형식화된 줄 또는 첫 글자를 제공하지 않습니다.

요소의 지정된 display가 inline-flex인 경우, display 속성은 특정 상황에서 flex로 계산됩니다: CSS 2.1 섹션 9.7의 표에는 "Specified Value" 열에 inline-flex, "Computed Value" 열에 flex가 추가된 행이 포함됩니다.

4. 플렉스 아이템

대략적으로, 플렉스 아이템은 플렉스 컨테이너의 플로우 내 컨텐츠를 나타내는 박스입니다.

플렉스 컨테이너의 플로우 내 자식 각각은 플렉스 아이템이 되며, 자식 텍스트 시퀀스는 익명 블록 컨테이너 플렉스 아이템으로 감싸집니다. 하지만 전체 텍스트 시퀀스가 문서 공백 문자만 포함한다면(즉, white-space 속성에 의해 영향을 받을 수 있는 문자), 해당 텍스트는 렌더링되지 않으며(텍스트 노드가 display:none인 것과 동일하게 처리됨)입니다.

<div style="display:flex">

    <!-- 플렉스 아이템: 블록 자식 -->
    <div id="item1">block</div>

    <!-- 플렉스 아이템: float된 요소; float는 무시됨 -->
    <div id="item2" style="float: left;">float</div>

    <!-- 플렉스 아이템: 인라인 컨텐츠를 감싸는 익명 블록 박스 -->
    anonymous item 3

    <!-- 플렉스 아이템: 인라인 자식 -->
    <span>
        item 4
        <!-- 플렉스 아이템은 블록 기준으로 분할되지 않음 -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>

플렉스 아이템은 그 내용에 대해 독립적인 포매팅 컨텍스트를 생성합니다. 하지만, 플렉스 아이템 자체는 플렉스 레벨 박스이며, 블록 레벨 박스가 아닙니다: 이들은 컨테이너의 플렉스 포매팅 컨텍스트에 참여하며, 블록 포매팅 컨텍스트에는 참여하지 않습니다.

참고: 이 명세를 읽는 저자는 아래 박스 생성 및 정적 위치 세부사항 부분을 건너뛰고 싶을 수 있습니다.

계산된 display 값이 요소의 가장 가까운 조상 요소( display:contents 조상은 건너뜀 )의 값이 flex 또는 inline-flex인 경우, 해당 요소의 display 값은 블록화(blockified)됩니다. (CSS2.1§9.7 [CSS2] 및 CSS Display 3 § 2.7 자동 박스 타입 변환 참조) 이 display 값 변환에 대한 자세한 내용은 참고하세요.

참고: 플렉스 또는 flex 또는 inline-flex 요소가 실제로 플렉스 컨테이너 박스를 생성하지 않을 경우에도 블록화는 여전히 발생합니다. 예: 대체 요소이거나 display: none 서브트리에 포함될 때 등.

참고: display의 일부 값은 원래 박스를 익명 박스로 감싸도록 트리거합니다. 이러한 박스가 플렉스 아이템이라면, 먼저 블록화되므로 익명 박스 생성이 일어나지 않습니다. 예를 들어, 플렉스 아이템이 display: table-cell이면 두 개의 연속된 요소가 각각 display: block 플렉스 아이템이 되고, 하나의 익명 테이블로 감싸지지 않습니다.

display: table인 플렉스 아이템의 경우, 테이블 래퍼 박스가 플렉스 아이템이 되므로 align-self 속성이 적용됩니다. 캡션 박스의 내용은 테이블 래퍼 박스의 min-content와 max-content 크기 계산에 포함됩니다. 하지만 width와 height처럼, flex 롱핸드 속성도 테이블 박스에 다음과 같이 적용됩니다: 플렉스 아이템의 최종 크기는 테이블 래퍼 박스의 엣지와 테이블 박스의 컨텐츠 엣지 사이 거리가 모두 테이블 박스의 border+padding 영역으로 간주되고, 테이블 박스가 플렉스 아이템인 것처럼 레이아웃을 수행하여 계산됩니다.

4.1. 절대 위치 플렉스 자식

플로우 외에 있기 때문에, 플렉스 컨테이너의 절대 위치 자식은 플렉스 레이아웃에 참여하지 않습니다.

플렉스 컨테이너의 절대 위치 자식의 교차 축에서의 static-position 사각형의 엣지는 컨테이너의 컨텐츠 엣지가 됩니다. static-position 사각형의 메인 축 엣지는 해당 자식이 플렉스 컨테이너의 유일한 플렉스 아이템이라고 가정할 때 자식의 마진 엣지가 위치할 곳입니다. 이때 자식과 플렉스 컨테이너 모두 사용된 크기의 박스라고 가정합니다. (이 목적을 위해 자식의 auto 마진은 0으로 간주합니다.)

4.2. 플렉스 아이템의 마진 및 패딩

인접한 플렉스 아이템의 마진은 병합되지 않습니다.

플렉스 아이템의 백분율 마진 및 패딩은, 블록 박스와 마찬가지로, 그 포함 블록의 인라인 크기를 기준으로 계산됩니다. 예를 들어, 좌/우/상/하 백분율 모두가 포함 블록의 너비를 기준으로 수평 쓰기 모드에서 계산됩니다.

auto 마진은 해당 차원의 여분의 공간을 흡수하도록 확장됩니다. 정렬에 사용할 수 있으며, 인접한 플렉스 아이템을 서로 밀어낼 수도 있습니다. auto 마진으로 정렬하기를 참고하세요.

4.3. 플렉스 아이템 Z-정렬

플렉스 아이템은 인라인 블록과 완전히 동일하게 페인팅됩니다 [CSS2], 단 order로 변경된 문서 순서가 원본 문서 순서 대신 사용되며, z-index 값이 auto가 아닌 경우, position이 static이더라도 스태킹 컨텍스트를 생성합니다 (마치 position이 relative인 것처럼 동작합니다).

참고: 플렉스 아이템 바깥에 위치된 후손도 플렉스 아이템이 생성한 스태킹 컨텍스트에 계속 참여합니다.

4.4. 축소된 아이템

visibility:collapse를 플렉스 아이템에 지정하면, 해당 아이템은 축소된 플렉스 아이템이 되어, visibility:collapse가 테이블 행이나 테이블 열에 적용될 때와 유사한 효과를 냅니다: 축소된 플렉스 아이템은 렌더링에서 완전히 제거되지만, 플렉스 라인의 교차 크기를 안정적으로 유지하는 "스트럿"을 남깁니다. 따라서 플렉스 컨테이너에 플렉스 라인이 하나만 있을 경우, 아이템을 동적으로 축소하거나 축소 해제하면 플렉스 컨테이너의 메인 크기가 변경될 수 있지만, 교차 크기에는 영향을 주지 않으며 페이지 레이아웃이 "흔들리는" 현상이 발생하지 않습니다. 플렉스 라인 래핑은 축소 후에 다시 수행되므로, 여러 라인을 가진 플렉스 컨테이너의 교차 크기는 변할 수도 있고 변하지 않을 수도 있습니다.

축소된 플렉스 아이템은 렌더링되지 않더라도, 포매팅 구조에는 나타납니다. 따라서 display:none 아이템과 달리 [CSS2], 박스가 포매팅 구조에 나타나야 동작하는 효과(카운터 증가, 애니메이션 및 트랜지션 실행 등)는 축소된 아이템에도 계속 적용됩니다.

@media (min-width: 60em) {
  /* 충분한 공간이 있을 때만 두 열 레이아웃 (기본 텍스트 크기 기준) */
  div { display: flex; }
  #main {
    flex: 1;         /* Main은 남은 공간을 모두 차지함 */
    order: 1;        /* 네비게이션 오른쪽에 배치 */
    min-width: 12em; /* 메인 콘텐츠 영역 크기 최적화 */
  }
}
/* 메뉴 아이템에 flex 레이아웃 적용하여 visibility:collapse가 동작하도록 함 */
nav > ul > li {
  display: flex;
  flex-flow: column;
}
/* 타겟되지 않은 서브메뉴를 동적으로 축소 */
nav > ul > li:not(:target):not(:hover) > ul {
  visibility: collapse;
}

<div>
  <article id="main">
    읽을거리
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">소개</a>
        …
      <li id="nav-projects"><a href="#nav-projects">프로젝트</a>
        <ul>
          <li><a href="…">예술</a>
          <li><a href="…">건축</a>
          <li><a href="…">음악</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">소통</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

스트럿의 크기를 계산하기 위해, 모든 아이템이 축소되지 않은 상태로 먼저 플렉스 레이아웃을 수행한 후, 각 축소된 플렉스 아이템을 해당 아이템의 원래 라인 교차 크기를 유지하는 스트럿으로 교체하여 다시 수행합니다. visibility:collapse가 플렉스 레이아웃과 어떻게 상호작용하는지에 대한 규범적 정의는 플렉스 레이아웃 알고리즘을 참고하세요.

참고: 플렉스 아이템에 visibility:collapse를 사용하면, 플렉스 레이아웃 알고리즘이 중간에 반복되어 가장 비용이 큰 단계가 다시 실행됩니다. 동적으로 아이템을 축소/복원하지 않을 경우에는 display:none을 사용하는 것이 레이아웃 엔진에 더 효율적이므로 권장합니다. (visibility가 변경될 때 일부 단계만 반복되므로, 동적 상황에서는 'visibility: collapse'를 사용하는 것이 여전히 권장됩니다.)

4.5. 플렉스 아이템의 자동 최소 크기

참고: auto 키워드, 자동 최소 크기를 나타내며, min-width와 min-height 속성의 새로운 초기값입니다. 이 키워드는 이전에는 이 명세에서 정의되었으나, 이제 CSS Sizing 모듈에서 정의됩니다.

보다 합리적인 기본 최소 크기를 플렉스 아이템에 제공하기 위해, 메인 축의 자동 최소 크기의 사용 값은 플렉스 아이템의 계산된 overflow 값이 스크롤 불가일 때 콘텐츠 기반 최소 크기가 됩니다; 스크롤 컨테이너의 경우 자동 최소 크기는 평소처럼 0입니다.

콘텐츠 기반 최소 크기는 플렉스 아이템이 대체 요소인지 아닌지에 따라 다릅니다:

대체 요소의 경우

콘텐츠 크기 제안과 이동된 크기 제안 중 더 작은 값을 사용하고(존재하는 경우), 지정된 크기 제안(존재하는 경우)로 상한을 둡니다.

비대체 요소의 경우

콘텐츠 크기 제안과 이동된 크기 제안(존재하는 경우) 중 더 큰 값을 사용하고, 지정된 크기 제안(존재하는 경우)로 상한을 둡니다.

두 경우 모두, 크기는 최대 메인 크기가 명확하다면 그 값으로 제한(clamp)됩니다.

이 계산에 사용되는 콘텐츠 크기 제안, 지정된 크기 제안, 이동된 크기 제안은 관련된 min/max/선호 크기 속성을 고려하여 콘텐츠 기반 최소 크기가 작성자가 제공한 제약조건을 침범하지 않도록 하며, 아래와 같이 정의됩니다:

지정된 크기 제안

아이템의 선호 메인 크기가 명확하고 자동이 아니라면, 지정된 크기 제안은 그 크기가 됩니다. 그렇지 않으면 정의되지 않습니다.

이동된 크기 제안

아이템에 선호하는 종횡비가 있고 선호 교차 크기가 명확하다면, 이동된 크기 제안은 그 크기( 최소와 최대 교차 크기가 명확하다면 그 값으로 제한됨 )을 종횡비로 변환한 값입니다. 그렇지 않으면 정의되지 않습니다.

콘텐츠 크기 제안

콘텐츠 크기 제안은 min-content 크기의 메인 축에서의 값이며, 선호하는 종횡비가 있다면 명확한 최소 및 최대 교차 크기로 변환하여 제한됩니다.

참고: 콘텐츠 기반 최소 크기는 내재적 크기 기여의 한 종류이므로, CSS Sizing 3 § 5.2 내재적 기여의 순환 백분율 규정이 적용됩니다.

박스의 내재적 크기를 계산할 때(예: 박스의 min-content 크기), 콘텐츠 기반 최소 크기는 해당 축에서 박스 크기를 불확정(indefinite)하게 만듭니다 (예를 들어 width 속성이 확정된 크기를 지정하더라도). 즉, 이 크기를 기준으로 계산되는 백분율은 auto로 동작하게 됩니다.

내재적 크기 계산 이외의 목적에서는, 콘텐츠 기반 최소 크기는(명시적 min-content/등의 최소 크기와 달리) 박스의 크기를 불확정으로 만들지 않습니다. 다만, 이 최소 크기가 적용되기 이전 박스 크기를 기준으로 계산된 백분율이 있다면, 반드시 최소 크기 적용 후의 새로운 크기에 맞게 다시 계산되어야 합니다.

5. 정렬 및 방향

플렉스 컨테이너의 내용은 어떤 방향으로든, 어떤 순서로든 배치될 수 있습니다. 이를 통해 저자는 이전에는 복잡하거나 불안정한 방법이 필요했던 효과를 손쉽게 구현할 수 있습니다. 예를 들어 float 및 clear 속성을 사용하는 해킹 방식 등이 있습니다. 이러한 기능은 flex-direction, flex-wrap, 그리고 order 속성을 통해 제공됩니다.

참고: 플렉스 레이아웃의 순서 변경 기능은 오직 시각적 렌더링에만 의도적으로 적용되며, 음성 순서와 소스 순서를 기반으로 한 내비게이션에는 영향을 주지 않습니다. 저자는 시각적 표현을 조정하면서도, CSS를 지원하지 않는 UA나 음성 및 순차 탐색 같은 선형 모델을 위해 소스 순서를 그대로 유지할 수 있습니다. 접근성을 개선하기 위해 이러한 이분법을 활용하는 예시는 CSS Display 3 § 3.1 순서 변경과 접근성 및 플렉스 레이아웃 개요에서 확인할 수 있습니다.

저자는 절대 order 또는 *-reverse 값의 flex-flow/flex-direction을 올바른 소스 순서의 대체로 사용해서는 안 됩니다. 이는 문서의 접근성을 저해할 수 있습니다.

5.1. 플렉스 흐름 방향: flex-direction 속성

flex-direction 속성은 flex items가 플렉스 컨테이너에 어떻게 배치될지, 즉 플렉스 컨테이너의 main axis의 방향을 설정합니다. 이를 통해 플렉스 아이템이 배치되는 방향이 결정됩니다.

row

플렉스 컨테이너의 main axis는 현재 inline axis와 동일한 방향을 가집니다. main-start와 main-end 방향은 각각 현재 inline-start 및 inline-end 방향과 동일합니다. 이 모든 것은 현재 writing mode 기준입니다.

테스트

• flex-child-percent-basis-resize-1.html (실시간 테스트) (source)
• flexbox-flex-basis-content-001a.html (실시간 테스트) (source)
• flexbox-flex-basis-content-001b.html (실시간 테스트) (source)
• flexbox-flex-direction-row.htm (실시간 테스트) (source)
• flexbox_justifycontent-left-001.html (실시간 테스트) (source)
• flexbox-writing-mode-010.html (실시간 테스트) (source)
• flexbox-writing-mode-011.html (실시간 테스트) (source)
• flexbox-writing-mode-012.html (실시간 테스트) (source)
• flexbox-writing-mode-016.html (실시간 테스트) (source)
• percentage-size.html (실시간 테스트) (source)

row-reverse

row와 동일하지만, main-start와 main-end 방향이 서로 뒤바뀝니다.

테스트

• flexbox_direction-row-reverse.html (실시간 테스트) (source)
• flexbox-mbp-horiz-001-reverse.xhtml (실시간 테스트) (source)
• flexbox-mbp-horiz-001-rtl-reverse.xhtml (실시간 테스트) (source)
• multi-line-wrap-with-row-reverse.html (실시간 테스트) (source)
• flexbox_justifycontent-right-001.html (실시간 테스트) (source)
• flexbox_justifycontent-start.html (실시간 테스트) (source)
• flexbox_justifycontent-start-rtl.html (실시간 테스트) (source)

column

플렉스 컨테이너의 main axis는 현재 block axis와 동일한 방향을 가집니다. main-start와 main-end 방향은 각각 현재 block-start 및 block-end 방향과 동일합니다. 이 모든 것은 현재 writing mode 기준입니다.

테스트

• columns-height-set-via-top-bottom.html (실시간 테스트) (source)
• dynamic-bsize-change.html (실시간 테스트) (source)
• flexbox_direction-column.html (실시간 테스트) (source)
• flexbox_direction-column-reverse.html (실시간 테스트) (source)
• flexbox_rtl-flow.html (실시간 테스트) (source)
• flex-column-relayout-assert.html (실시간 테스트) (source)
• flex-item-max-height-min-content.html (실시간 테스트) (source)
• flex-item-transferred-sizes-padding-border-sizing.html (실시간 테스트) (source)
• flex-item-transferred-sizes-padding-content-sizing.html (실시간 테스트) (source)
• flex-outer-flexbox-column-recalculate-height-on-resize-001.html (실시간 테스트) (source)
• image-nested-within-definite-column-flexbox.html (실시간 테스트) (source)
• layout-with-inline-svg-001.html (실시간 테스트) (source)
• nested-orthogonal-flexbox-relayout.html (실시간 테스트) (source)
• percentage-max-width-cross-axis.html (실시간 테스트) (source)
• percentage-size.html (실시간 테스트) (source)

column-reverse

column과 동일하지만, main-start와 main-end 방향이 서로 뒤바뀝니다.

테스트

• column-reverse-gap.html (실시간 테스트) (source)
• flexbox_rtl-direction.html (실시간 테스트) (source)
• multi-line-wrap-with-column-reverse.html (실시간 테스트) (source)

참고: reverse 값은 박스의 순서를 뒤집지 않습니다. writing-mode 및 direction [CSS3-WRITING-MODES]와 같이, 흐름의 방향만 변경됩니다. 페인팅 순서, 음성 순서, 그리고 순차 탐색 순서는 영향을 받지 않습니다.

참고: justify-content의 값에 따라, flex-direction의 reverse 값이 flex containers이자 scroll containers의 초기 스크롤 위치에 영향을 줄 수 있습니다. 자세한 내용은 CSS Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containers를 참고하세요.

5.2. 플렉스 줄 감싸기: flex-wrap 속성

flex-wrap 속성은 플렉스 컨테이너가 단일 줄인지, 다중 줄인지와 새로운 줄이 쌓이는 교차 축의 방향을 제어합니다.

nowrap

플렉스 컨테이너는 단일 줄입니다.

wrap

플렉스 컨테이너는 다중 줄입니다.

wrap-reverse

wrap과 동일합니다.

wrap-reverse가 아닌 값에서는, cross-start 방향은 현재 inline-start 또는 block-start 방향과 동일합니다 (둘 중 교차 축에 해당하는 방향), 그리고 cross-end 방향은 cross-start의 반대 방향입니다. flex-wrap이 wrap-reverse일 때는 cross-start와 cross-end 방향이 서로 뒤바뀝니다.

참고: align-content의 값에 따라, wrap-reverse 값의 flex-wrap이 flex containers이자 scroll containers의 초기 스크롤 위치에 영향을 줄 수 있습니다. 자세한 내용은 CSS Box Alignment 3 § 5.3 Alignment Overflow and Scroll Containers를 참고하세요.

5.3. 플렉스 방향 및 감싸기: flex-flow 단축 속성

flex-flow 속성은 flex-direction과 flex-wrap 속성을 한 번에 설정하는 단축 속성으로, 이 두 속성은 플렉스 컨테이너의 메인 축과 교차 축을 함께 정의합니다.

영어(좌→우, 수평 쓰기 모드) 문서에서 유효한 플로우 예시:

div { flex-flow: row; } /* 초기값. 메인 축이 인라인 방향, 줄 바꿈 없음. (아이템은 줄어들거나 넘칠 수 있음) */
div { flex-flow: column wrap; } /* 메인 축이 블록 방향(위에서 아래로) 줄은 인라인 방향(오른쪽)으로 감쌈. */
div { flex-flow: row-reverse wrap-reverse; } /* 메인 축이 인라인 방향의 반대(오른쪽에서 왼쪽). 새 줄은 위쪽으로 감쌈. */

참고: flex-flow 방향은 writing mode에 따라 달라집니다. 예를 들어, 일본어 세로쓰기에서는 row 플렉스 컨테이너가 위에서 아래로 내용을 배치합니다. 아래 예시를 참고하세요:

영어	일본어
flex-flow: row wrap; writing-mode: horizontal-tb;	flex-flow: row wrap; writing-mode: vertical-rl;

5.4. 순서 변경 및 접근성: order 속성

플렉스 아이템은 기본적으로 소스 문서에 나타난 순서대로 표시되고 배치되며, 이는 논리적 순서를 나타냅니다. 이 순서는 비시각적 미디어(예: 음성), 순차 탐색 모드의 기본 순서(예: 링크 순환, tabindex [HTML] 참고), 그리고 CSS를 지원하지 않는 UA에서 컨텐츠가 표현될 때도 그대로 사용됩니다.

order 속성을 사용하면 플렉스 아이템의 순서를 변경할 수 있습니다. 이를 통해 수정된 문서 순서대로 배치하게 할 수 있으며, 2D 시각적 캔버스에서의 공간 배치가 음성이나 순차 탐색 등 선형 표현에서의 논리적 순서와 다르게 할 수 있습니다. 자세한 내용은 CSS Display 3 § 3 Display Order: the order property와 [CSS-DISPLAY-3]를 참고하세요.

참고: 시각적 인식은 2차원 비선형이기 때문에, 원하는 박스 순서가 비시각적 미디어나 CSS를 지원하지 않는 UA에서 사용되는 논리적 순서와 항상 일치하지는 않습니다.

저자는 반드시 order를 논리적 순서가 아니라 시각적 순서 변경에만 사용해야 합니다. order를 논리적 순서 변경에 사용하는 스타일 시트는 비준수입니다.

많은 웹 페이지는 마크업 구조가 비슷하며, 상단에 헤더, 하단에 푸터, 중앙에 콘텐츠 영역과 하나 또는 두 개의 추가 컬럼이 있습니다. 일반적으로 콘텐츠가 페이지 소스 코드에서 추가 컬럼보다 먼저 오는 것이 바람직합니다. 하지만 이러한 구조는, 예를 들어 추가 컬럼을 왼쪽에, 콘텐츠 영역을 오른쪽에 두고 싶은 경우, 구현이 어려울 수 있습니다. 이런 문제는 오랜 기간 다양한 방식으로 해결되어 왔으며, 두 개의 추가 컬럼이 있을 때 "Holy Grail Layout"이라는 이름으로 불리곤 했습니다. order를 사용하면 아주 간단하게 해결할 수 있습니다. 아래는 페이지 코드와 원하는 레이아웃의 예시입니다:

<!DOCTYPE html>
<header>...</header>
<main>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</main>
<footer>...</footer>

이 레이아웃은 플렉스 레이아웃으로 손쉽게 구현할 수 있습니다:

main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

추가로, 컬럼들은 기본적으로 동일 높이로 맞춰지며, 메인 콘텐츠는 화면을 채우는 만큼의 너비를 가지게 됩니다. 또한, 미디어 쿼리를 활용해 화면이 좁을 때 전체를 세로 레이아웃으로 바꿀 수도 있습니다:

@media all and (max-width: 600px) {
  /* 세 컬럼을 지원하기엔 너무 좁음 */
  main { flex-flow: column; }
  main > article, main > nav, main > aside {
    /* 문서 순서로 복귀 */
    order: 0; width: auto;
  }
}

(다중 줄 플렉스 컨테이너를 더 활용해 보다 지능적인 감싸기를 구현하는 것은 독자에게 남깁니다.)

6. 플렉스 줄(Flex Lines)

플렉스 아이템은 플렉스 컨테이너 내에서 플렉스 줄에 따라 배치되고 정렬됩니다. 이는 레이아웃 알고리즘에서 그룹화와 정렬을 위해 사용하는 가상의 컨테이너입니다. 플렉스 컨테이너는 단일 줄이거나 다중 줄일 수 있으며, 이는 flex-wrap 속성에 따라 결정됩니다:

• 단일 줄 플렉스 컨테이너 (flex-wrap: nowrap을 사용하는 경우) 모든 자식 요소를 한 줄에 배치하며, 이로 인해 내용이 넘칠 수 있습니다.

• 다중 줄 플렉스 컨테이너 (flex-wrap: wrap 또는 flex-wrap: wrap-reverse을 사용하는 경우) 플렉스 아이템을 여러 줄로 나누어 배치합니다. 이는 텍스트가 너무 넓어 한 줄에 다 못 들어갈 때 새 줄로 넘어가는 방식과 유사합니다. 추가 줄이 생성되면, 교차 축 방향에 따라 플렉스 컨테이너에 쌓입니다. 모든 줄에는 최소한 하나의 플렉스 아이템이 포함되며, 플렉스 컨테이너가 완전히 비어 있지 않은 한 줄은 반드시 존재합니다.

이 예시는 네 개의 버튼이 수평으로 한 줄에 다 들어가지 않아, 여러 줄로 자동 감싸지는 모습을 보여줍니다.

#flex {
  display: flex;
  flex-flow: row wrap;
  width: 300px;
}
.item {
  width: 80px;
}

<div id="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

컨테이너의 너비가 300px이므로, 아이템 세 개만 한 줄에 들어갑니다. 세 아이템이 240px을 차지하고, 60px의 공간이 남습니다. flex-flow 속성에 다중 줄 플렉스 컨테이너를 지정했으므로 (wrap 키워드 사용), 플렉스 컨테이너는 마지막 아이템을 담을 추가 줄을 생성합니다.

내용이 줄로 나누어지면, 각 줄은 독립적으로 레이아웃됩니다. 유연한 길이와 justify-content, align-self 속성은 한 번에 한 줄의 아이템만 고려합니다.

다중 줄 플렉스 컨테이너(줄이 하나뿐이어도)는 각 줄의 교차 크기가 해당 줄의 플렉스 아이템을 담기에 필요한 최소 크기가 됩니다 (align-self에 의해 정렬된 후). 줄들은 align-content 속성으로 플렉스 컨테이너 내에서 정렬됩니다. 단일 줄 플렉스 컨테이너에서는 줄의 교차 크기가 플렉스 컨테이너의 교차 크기와 같고, align-content는 영향을 주지 않습니다. 줄의 메인 크기는 항상 플렉스 컨테이너의 콘텐츠 박스 메인 크기와 동일합니다.

이전과 동일한 예시지만, 플렉스 아이템에 모두 flex: auto가 적용되었습니다. 첫 번째 줄에는 60px의 남는 공간이 있고, 모든 아이템이 동일한 유연성을 가지므로 한 줄에 있는 세 아이템 각각이 20px씩 추가 너비를 받아 각 아이템의 최종 너비가 100px이 됩니다. 남은 아이템 하나는 자신만의 줄에 위치하며 해당 줄의 전체 너비, 즉 300px로 늘어납니다.

7. 유연성(Flexibility)

플렉스 레이아웃의 핵심은 플렉스 아이템을 "flex"하게 만들어, main dimension에서 사용 가능한 공간을 채우도록 너비/높이를 조정하는 기능입니다. 이는 flex 속성으로 구현됩니다. 플렉스 컨테이너는 남는 공간을 아이템에 분배할 때(각 아이템의 flex grow factor에 비례) 컨테이너를 채우고, 또는 넘침을 방지하기 위해(각 아이템의 flex shrink factor에 비례) 아이템 크기를 줄입니다.

플렉스 아이템은 완전히 유연하지 않음 상태일 때, flex-grow와 flex-shrink 값이 모두 0이면 그렇고, 그렇지 않으면 유연함입니다.

7.1. flex 단축 속성

flex 속성은 유연한 크기를 구성하는 요소들을 지정합니다: flex 계수 (성장 및 축소) 그리고 flex 기준값입니다. 박스가 플렉스 아이템일 때, flex는 메인 크기 속성 대신 박스의 메인 크기를 결정하는 데 사용됩니다. 박스가 플렉스 아이템이 아니면 flex는 아무런 영향을 주지 않습니다.

참고: flex 롱핸드의 초기값은 flex: 0 1 auto와 동일합니다. 이는 flex 단축 속성에서 생략했을 때의 기본값(실질적으로 1 1 0px)과 다르며, flex 단축 속성이 가장 일반적인 경우를 더 잘 처리할 수 있도록 설계된 것입니다.

<'flex-grow'>

이 <number [0,∞]> 요소는 flex-grow 롱핸드를 설정하며, flex 성장 계수를 지정합니다. 이는 플렉스 아이템이 flex 컨테이너 내에서 다른 플렉스 아이템에 비해 양의 여유 공간이 분배될 때 얼마나 성장할지 결정합니다. 생략 시 1로 설정됩니다.

테스트

• flex-grow-interpolation.html (실시간 테스트) (source)
• flex-001.htm (실시간 테스트) (source)
• flex-003.htm (실시간 테스트) (source)
• flex-grow-001.xht (실시간 테스트) (source)
• flex-grow-002.html (실시간 테스트) (source)
• flex-grow-003.html (실시간 테스트) (source)
• flex-grow-004.html (실시간 테스트) (source)
• flex-grow-005.html (실시간 테스트) (source)
• flex-grow-006.html (실시간 테스트) (source)
• flex-grow-007.html (실시간 테스트) (source)
• flex-grow-008.html (실시간 테스트) (source)
• flexbox_flex-natural.html (실시간 테스트) (source)
• flexbox_flex-natural-mixed-basis-auto.html (실시간 테스트) (source)
• flexbox_flex-natural-mixed-basis.html (실시간 테스트) (source)
• flexbox_flex-natural-variable-auto-basis.html (실시간 테스트) (source)
• flexbox_flex-natural-variable-zero-basis.html (실시간 테스트) (source)
• flexbox_flex-none.html (실시간 테스트) (source)
• flexbox_flex-none-wrappable-content.html (실시간 테스트) (source)
• flex-factor-less-than-one.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-0-auto.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-auto.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-initial.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-invalid.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-none.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shorthand-number.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-grow-0.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-grow-invalid.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-grow-number.html (실시간 테스트) (source)
• flexbox_interactive_flex-grow-transitions.html (manual test) (source)
• flex-grow-computed.html (실시간 테스트) (source)
• flex-grow-invalid.html (실시간 테스트) (source)
• flex-grow-valid.html (실시간 테스트) (source)
• table-item-flex-percentage-min-width.html (실시간 테스트) (source)
• table-item-flex-percentage-width.html (실시간 테스트) (source)

0과 1 사이의 flex 값은 다소 특별한 동작을 합니다: 한 줄의 flex 값 합이 1 미만이면, 남는 공간의 100%보다 적은 공간만 차지하게 됩니다.

아이템의 flex-grow 값은 실질적으로 남는 공간의 비율을 요청하는 것이며, 1은 "남는 공간의 100%"를 의미합니다; 한 줄의 아이템들이 총합 100% 이상을 요청하면, 요청값의 비율은 유지하되 정확히 100%만 사용하도록 재조정됩니다. 그러나 아이템들이 전체 공간보다 적게 요청하는 경우 (예: 세 아이템 각각 flex-grow: .25), 각 아이템은 요청한 대로(각각 남는 공간의 25%)만 차지하고, 나머지 25%는 비어 있게 됩니다. 남는 공간이 어떻게 분배되는지에 대한 자세한 내용은 § 9.7 유연한 길이 해결을 참고하세요.

이 패턴은 flex-grow 값이 0에 가까워질 때(즉, 아이템이 남는 공간을 전혀 원하지 않는 경우) 연속적인 동작을 위해 필요합니다. 만약 이 동작이 없다면, flex-grow: 1 아이템도 모든 남는 공간을 차지하고, flex-grow: 0.1 아이템도, flex-grow: 0.01 아이템도 마찬가지로 남는 공간을 모두 차지하다가, 값이 충분히 작아져서 0이 되면 갑자기 남는 공간을 전혀 차지하지 않게 됩니다. 이러한 동작에서는 flex-grow 값이 1 이하로 줄어들수록 아이템이 남는 공간을 점점 덜 차지하며, 값이 0일 때는 매끄럽게 남는 공간을 아예 차지하지 않게 됩니다.

이러한 "부분 채움" 동작이 특별히 필요한 경우가 아니라면, 저자는 값 ≥ 1을 사용하는 것이 좋습니다; 예를 들어 1과 2를 사용하는 것이 .33과 .67을 사용하는 것보다 아이템이 추가, 삭제되거나 줄 바꿈이 발생할 때 의도대로 동작할 가능성이 높습니다.

<'flex-shrink'>

이 <number [0,∞]> 요소는 flex-shrink 롱핸드를 설정하며, flex 축소 계수를 지정합니다. 이는 플렉스 아이템이 flex 컨테이너 내에서 다른 플렉스 아이템에 비해 음의 여유 공간이 분배될 때 얼마나 축소될지 결정합니다. 생략 시 1로 설정됩니다.

테스트

• flex-shrink-interpolation.html (실시간 테스트) (source)
• flex-002.htm (실시간 테스트) (source)
• flex-004.htm (실시간 테스트) (source)
• flex-factor-less-than-one.html (실시간 테스트) (source)
• flex-shrink-001.html (실시간 테스트) (source)
• flex-shrink-002.html (실시간 테스트) (source)
• flex-shrink-003.html (실시간 테스트) (source)
• flex-shrink-004.html (실시간 테스트) (source)
• flex-shrink-005.html (실시간 테스트) (source)
• flex-shrink-006.html (실시간 테스트) (source)
• flex-shrink-007.html (실시간 테스트) (source)
• flex-shrink-008.html (실시간 테스트) (source)
• flex-shrink-large-value-crash.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shrink-0.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shrink-invalid.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-shrink-number.html (실시간 테스트) (source)
• flexbox_interactive_flex-shrink-transitions.html (manual test) (source)
• flexbox_interactive_flex-shrink-transitions-invalid.html (manual test) (source)
• flex-shrink-computed.html (실시간 테스트) (source)
• flex-shrink-invalid.html (실시간 테스트) (source)
• flex-shrink-valid.html (실시간 테스트) (source)
• table-item-flex-percentage-min-width.html (실시간 테스트) (source)
• table-item-flex-percentage-width.html (실시간 테스트) (source)

참고: flex shrink factor는 음수 공간을 분배할 때 flex base size와 곱해집니다. 이는 각 아이템이 얼마나 줄어들 수 있는지에 비례하여 음수 공간을 분배하므로, 예를 들어 작은 아이템이 큰 아이템이 눈에 띄게 줄어들기 전에 0이 되지 않도록 합니다.

테스트

• flex-item-max-width-min-content-002.html (실시간 테스트) (source)

<'flex-basis'>

이 구성 요소는 flex-basis 롱핸드를 설정하며, flex 기준값을 지정합니다: 메인 크기의 초기값을 플렉스 아이템에 대해 지정하며, flex 계수에 따라 남는 공간이 분배되기 전의 크기입니다.

테스트

• flex-basis-composition.html (실시간 테스트) (source)
• flex-basis-content-crash.html (실시간 테스트) (source)
• flex-basis-interpolation.html (실시간 테스트) (source)
• dynamic-isize-change-001.html (실시간 테스트) (source)
• dynamic-isize-change-002.html (실시간 테스트) (source)
• dynamic-isize-change-003.html (실시간 테스트) (source)
• dynamic-isize-change-004.html (실시간 테스트) (source)
• flex-basis-001.html (실시간 테스트) (source)
• flex-basis-002.html (실시간 테스트) (source)
• flex-basis-003.html (실시간 테스트) (source)
• flex-basis-004.html (실시간 테스트) (source)
• flex-basis-005.html (실시간 테스트) (source)
• flex-basis-006.html (실시간 테스트) (source)
• flex-basis-007.html (실시간 테스트) (source)
• flex-basis-008.html (실시간 테스트) (source)
• flex-basis-009.html (실시간 테스트) (source)
• flex-basis-010.html (실시간 테스트) (source)
• flex-basis-011.html (실시간 테스트) (source)
• flex-basis-012.html (실시간 테스트) (source)
• flex-basis-013.html (실시간 테스트) (source)
• flex-basis-intrinsics-001.html (실시간 테스트) (source)
• flex-basis-item-margins-001.html (실시간 테스트) (source)
• flexbox-flex-basis-content-001a.html (실시간 테스트) (source)
• flexbox-flex-basis-content-001b.html (실시간 테스트) (source)
• flexbox-flex-basis-content-002a.html (실시간 테스트) (source)
• flexbox-flex-basis-content-002b.html (실시간 테스트) (source)
• flexbox-flex-basis-content-003a.html (실시간 테스트) (source)
• flexbox-flex-basis-content-003b.html (실시간 테스트) (source)
• flexbox-flex-basis-content-004a.html (실시간 테스트) (source)
• flexbox-flex-basis-content-004b.html (실시간 테스트) (source)
• flexbox_flex-basis.html (실시간 테스트) (source)
• flexbox_flex-basis-shrink.html (실시간 테스트) (source)
• flex-one-sets-flex-basis-to-zero-px.html (실시간 테스트) (source)
• flex-shorthand-flex-basis-middle.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-basis-0.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-basis-0percent.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-basis-auto.html (실시간 테스트) (source)
• flexbox_computedstyle_flex-basis-percent.html (실시간 테스트) (source)
• flexbox_interactive_flex-basis-transitions.html (manual test) (source)
• flex-basis-computed.html (실시간 테스트) (source)
• flex-basis-invalid.html (실시간 테스트) (source)
• flex-basis-valid.html (실시간 테스트) (source)
• table-as-item-percent-width-cell-001.html (실시간 테스트) (source)

<'flex-basis'>는 width 및 height 속성과 동일한 값을 허용합니다 (auto는 다르게 처리됨) 그리고 content 키워드도 허용됩니다:

auto

플렉스 아이템에 지정되면, auto 키워드는 메인 크기 속성의 값을 실제 flex-basis로 가져옵니다. 그 값 자체가 auto라면, 실제 값은 content가 됩니다.

content

컨텐츠 기반 자동 크기를 의미하며, 플렉스 아이템의 컨텐츠를 기준으로 합니다. (일반적으로 max-content 크기와 동일하지만, 선호 비율, 고유 크기 제약, 교차 흐름 등을 보정합니다; 자세한 내용은 § 9 Flex Layout Algorithm을 참고하세요.)

참고: 이 값은 Flexible Box Layout 초판에는 없었으며, 때문에 일부 오래된 구현에서는 지원되지 않을 수 있습니다. 같은 효과는 auto와 메인 크기(width 또는 height)를 auto로 지정하면 얻을 수 있습니다.

<'width'>

그 외 값들은 flex-basis가 width 및 height와 동일하게 해석됩니다.

flex 단축 속성에서 생략된 경우, 지정값은 0입니다.

none

none 키워드는 0 0 auto로 확장됩니다.

단위 없는 0이 앞에 flex 계수 두 개가 오지 않았을 때는 flex 계수로 해석해야 합니다. 잘못 해석하거나 잘못된 선언을 방지하려면, 저자는 <'flex-basis'> 구성 요소의 0 값을 단위와 함께 지정하거나, 앞에 flex 계수 두 개를 명시해야 합니다.

7.1.1. flex의 기본 값

이 절은 참고용입니다.

아래 목록은 가장 일반적으로 원하는 효과를 나타내는 네 가지 flex 값의 동작을 요약합니다:

flex: initial

flex: 0 1 auto와 동일합니다. (초기값) width/height 속성을 기준으로 아이템 크기를 지정합니다. (아이템의 메인 크기 속성이 auto로 계산되면, 컨텐츠 기반으로 크기가 결정됩니다.) 양의 남는 공간이 있을 때는 아이템을 유연하지 않게 하고, 공간이 부족할 때는 최소 크기까지 줄어들 수 있습니다. 정렬 기능이나 auto 마진을 활용해 메인 축에서 flex 아이템을 정렬할 수 있습니다.

flex: auto

flex: 1 1 auto와 동일합니다. width/height 속성을 기반으로 크기를 지정하지만, 완전히 유연하게 만들어 메인 축에서 남는 공간을 모두 흡수하게 합니다. 모든 아이템이 flex: auto, flex: initial, flex: none 중 하나라면, 아이템 크기 지정 후 남는 공간은 flex: auto가 적용된 아이템에 균등하게 분배됩니다.

flex: none

flex: 0 0 auto와 동일합니다. width/height 속성에 따라 아이템 크기가 결정되며, flex 아이템을 완전히 유연하지 않게 만듭니다. initial과 유사하지만, flex 아이템은 공간이 넘쳐도 축소가 허용되지 않습니다.

flex: <number [1,∞]>

flex: <number [1,∞]> 1 0과 동일합니다. flex 아이템을 유연하게 만들고 flex 기준값을 0으로 설정하여, flex 컨테이너의 남는 공간을 지정한 비율만큼 받게 만듭니다. 컨테이너 내의 모든 아이템이 이 패턴을 사용하면, 크기가 지정된 flex 계수에 비례하게 됩니다.

기본적으로 플렉스 아이템은 최소 컨텐츠 크기(가장 긴 단어 또는 고정 크기 요소의 길이)보다 작아지지 않습니다. 이를 변경하려면 min-width 또는 min-height 속성을 설정하세요. (§ 4.5 플렉스 아이템의 자동 최소 크기 참고)

7.2. 유연성의 구성 요소

유연성의 개별 구성 요소는 독립적인 롱핸드 속성으로 제어할 수 있습니다.

저자는 flex 단축 속성을 사용하여 유연성을 제어하는 것을 권장합니다. 단축 속성은 지정되지 않은 구성 요소를 올바르게 초기화해 일반적인 사용 사례에 적합하게 동작하기 때문입니다.

7.2.1. flex-grow 속성

저자는 flex 단축 속성을 사용해 유연성을 제어하는 것이 권장됩니다. flex-grow 속성을 직접 사용하는 것보다, 단축 속성이 지정되지 않은 구성 요소를 올바르게 초기화하여 일반적인 사용 사례에 적합하게 동작하기 때문입니다.

flex-grow 속성은 flex 성장 계수를 제공된 <number> 값으로 설정합니다. 음수 값은 허용되지 않습니다.

7.2.2. flex-shrink 속성

저자는 flex 단축 속성을 사용하여 유연성을 제어하는 것이 권장되며, flex-shrink 속성을 직접 사용하는 것보다, 단축 속성이 지정되지 않은 구성 요소를 올바르게 초기화해 일반적인 사용 사례에 적합하게 동작하기 때문입니다.

flex-shrink 속성은 flex 축소 계수를 <number> 값으로 설정합니다. 음수 값은 허용되지 않습니다.

7.2.3. flex-basis 속성

저자는 flex 단축 속성을 사용해 유연성을 제어하는 것을 권장합니다. flex-basis 속성을 직접 사용하기보다는, 단축 속성이 지정되지 않은 구성 요소를 올바르게 초기화해 일반적인 사용 사례에 적합하게 동작하기 때문입니다.

flex-basis 속성은 flex 기준값을 설정합니다. 이 속성은 width와 height 속성과 동일한 값, 그리고 content도 허용합니다.

auto와 content를 제외한 모든 값에 대해(위에서 정의됨), flex-basis는 수평 쓰기 모드에서 width와 동일하게 해석됩니다 [CSS2]. 단, 해당 값이 width에서 auto로 계산되는 경우, flex-basis에서는 content로 계산됩니다. 예를 들어, flex-basis의 백분율 값은 플렉스 아이템의 포함 블록(즉, flex container)을 기준으로 계산됩니다; 만약 그 포함 블록의 크기가 명확하지 않은 경우, flex-basis에 사용되는 값은 content입니다. 또 다른 예로, flex-basis는 별도로 지정되지 않는 한 컨텐츠 박스의 크기를 결정합니다. 예외는 box-sizing처럼 따로 지정한 경우입니다 [CSS3UI].

8. 정렬(Alignment)

플렉스 컨테이너의 내용이 flex 동작을 모두 마치고 플렉스 아이템의 크기가 확정된 후, 그 아이템들은 플렉스 컨테이너 내에서 정렬할 수 있습니다.

margin 속성을 사용해 블록 레이아웃에서 마진이 할 수 있는 것보다 더 강력하고 다양한 방식으로 아이템을 정렬할 수 있습니다. 플렉스 아이템은 또한 CSS Box Alignment의 정렬 속성도 지원합니다. 이를 통해 메인 축과 교차 축 모두에서 키워드 기반으로 쉽게 정렬할 수 있습니다. 이러한 속성들은 수평 및 수직 중앙 정렬처럼 CSS 2.1에서 매우 어려웠던 정렬도 쉽게 구현할 수 있습니다.

참고: 정렬 속성들은 CSS Box Alignment [CSS-ALIGN-3]에서 정의되어 있지만, Flexible Box Layout에서는 관련 정의를 다시 한번 명시하여 명세의 진척을 늦추는 규범적 의존성을 만들지 않기 위함입니다. 이러한 속성들은 CSS Box Alignment Level 3가 완성될 때까지 플렉스 레이아웃에만 적용됩니다. Box Alignment 모듈에서 새로 정의된 값은 Flexible Box Layout에도 적용되며, 즉, Box Alignment 모듈이 완성되면 이곳의 정의를 대체하게 됩니다.

8.1. auto 마진으로 정렬하기

이 절은 규범적이지 않습니다. 마진이 플렉스 아이템에 어떻게 영향을 주는지에 대한 규범적 정의는 Flex Layout Algorithm 절에 있습니다.

플렉스 아이템의 auto 마진은 블록 플로우에서의 auto 마진과 매우 유사한 효과를 냅니다:

• 플렉스 기준값과 유연한 길이를 계산할 때, auto 마진은 0으로 취급됩니다.

• justify-content 및 align-self로 정렬하기 전에, 해당 방향의 양의 남는 공간이 auto 마진에 분배됩니다.

• 오버플로우되는 박스는 auto 마진을 무시하고 end 방향으로 넘칩니다.

참고: 남는 공간이 auto 마진에 분배되면, 정렬 속성은 해당 방향에서 효과가 없습니다. 왜냐하면 마진이 flexing 후 남은 모든 공간을 가져가기 때문입니다.

nav > ul {
  display: flex;
}
nav > ul > #login {
  margin-left: auto;
}

<nav>
  <ul>
    <li><a href=/about>소개</a>
    <li><a href=/projects>프로젝트</a>
    <li><a href=/interact>상호작용</a>
    <li id="login"><a href=/login>로그인</a>
  </ul>
</nav>

8.2. 축 정렬: justify-content 속성

justify-content 속성은 플렉스 컨테이너의 현재 줄에서 플렉스 아이템을 메인 축을 따라 정렬합니다. 이 동작은 모든 유연한 길이와 auto 마진이 해결된 이후에 수행됩니다. 일반적으로 한 줄의 모든 플렉스 아이템이 유연하지 않거나, 유연하지만 최대 크기에 도달한 경우 남는 여분의 공간을 분배하는 데 도움이 됩니다. 또한, 줄이 오버플로우될 때 아이템 정렬에 어느 정도 제어력을 제공합니다.

flex-start

플렉스 아이템들이 줄의 시작 부분에 몰립니다. 줄의 첫 번째 플렉스 아이템의 main-start 마진 엣지가 줄의 main-start 엣지와 맞닿도록 배치되며, 이후 아이템들은 앞선 아이템과 맞닿도록 순서대로 배치됩니다.

테스트

• flexbox_justifycontent-start.html (실시간 테스트) (source)
• flexbox_justifycontent-start-rtl.html (실시간 테스트) (source)

flex-end

플렉스 아이템들이 줄의 끝 부분에 몰립니다. 줄의 마지막 플렉스 아이템의 main-end 마진 엣지가 줄의 main-end 엣지와 맞닿도록 배치되며, 이전 아이템들은 그 다음 아이템과 맞닿도록 순서대로 배치됩니다.

테스트

• css-box-justify-content.html (실시간 테스트) (source)
• flexbox_justifycontent-end.html (실시간 테스트) (source)
• flexbox_justifycontent-end-rtl.html (실시간 테스트) (source)
• flexbox_justifycontent-flex-end.html (실시간 테스트) (source)

center

플렉스 아이템들이 줄의 중앙에 몰립니다. 줄의 플렉스 아이템들은 서로 맞닿아 배치되고, 줄의 중앙에 맞춰 정렬됩니다. 줄의 main-start 엣지와 첫 아이템 사이, 줄의 main-end 엣지와 마지막 아이템 사이의 공간이 동일합니다. (만약 남은 공간이 음수라면, 플렉스 아이템들은 양쪽으로 동일하게 넘쳐 배치됩니다.)

테스트

• flexbox_justifycontent-center.html (실시간 테스트) (source)
• flexbox_justifycontent-center-overflow.html (실시간 테스트) (source)

space-between

플렉스 아이템들이 줄 전체에 고르게 분배됩니다. 남는 공간이 음수이거나, 줄에 플렉스 아이템이 하나뿐인 경우, 이 값은 safe flex-start로 대체됩니다. 그 외에는, 줄의 첫 번째 플렉스 아이템의 main-start 마진 엣지가 줄의 main-start 엣지와 맞닿고, 줄의 마지막 플렉스 아이템의 main-end 마진 엣지가 줄의 main-end 엣지와 맞닿으며, 나머지 플렉스 아이템들은 서로 인접한 아이템 사이의 간격이 모두 동일하도록 배치됩니다.

테스트

• flexbox_justifycontent-spacebetween.html (실시간 테스트) (source)
• flexbox_justifycontent-spacebetween-negative.html (실시간 테스트) (source)
• flexbox_justifycontent-spacebetween-only.html (실시간 테스트) (source)

space-around

플렉스 아이템들이 줄 전체에 고르게 분배되며, 양 끝에는 절반 크기의 공간이 들어갑니다. 남는 공간이 음수이거나, 줄에 플렉스 아이템이 하나뿐인 경우, 이 값은 safe center로 대체됩니다. 그 외에는, 줄의 플렉스 아이템들이 인접한 플렉스 아이템 사이의 간격이 모두 동일하도록 분배되고, 첫/마지막 플렉스 아이템과 플렉스 컨테이너의 엣지 사이의 간격은 아이템 사이 간격의 절반 크기입니다.

테스트

• flexbox-column-row-gap-001.html (실시간 테스트) (source)
• flexbox-column-row-gap-002.html (실시간 테스트) (source)
• flexbox-column-row-gap-003.html (실시간 테스트) (source)
• flexbox-column-row-gap-004.html (실시간 테스트) (source)
• flexbox_columns-flexitems-2.html (실시간 테스트) (source)
• flexbox_columns-flexitems.html (실시간 테스트) (source)
• flexbox_justifycontent-spacearound.html (실시간 테스트) (source)
• flexbox_justifycontent-spacearound-negative.html (실시간 테스트) (source)
• flexbox_justifycontent-spacearound-only.html (실시간 테스트) (source)

세 가지 색상 아이템으로 구성된 플렉스 컨테이너에서 justify-content의 다섯 키워드와 그 효과를 보여주는 그림입니다.

8.3. 교차 축 정렬: align-items, align-self 속성