유연한 상자 레이아웃

플렉스박스(유연한 상자 레이아웃)는 CSS2.1(Cascading Style Sheets, Level 2 Revision 1)에서 정의되는 네 가지 기본 레이아웃 모드(블록 레이아웃, 인라인 레이아웃, 표 레이아웃 및 배치된 레이아웃)에 추가됩니다. 플렉스박스 레이아웃을 사용하여 복잡한 웹 페이지를 더 쉽게 배치하고 화면 및 브라우저 창 크기가 변경될 때 요소의 상대 위치 및 크기가 조정되도록 할 수 있습니다. 플렉스박스는 정확한 위치 및 크기 지정이 훨씬 복잡한 부동 기능 및 테이블 기반 레이아웃에 대한 의존도를 줄일 수 있습니다.

플렉스박스 레이아웃을 통해 다음 작업을 더 쉽게 할 수 있습니다.

  • 서로 다른 화면 및 브라우저 창 크기를 사용할 만큼 유동적이지만 서로에 대해 상대적인 위치와 크기를 유지하는 요소(예: 이미지 또는 컨트롤)를 포함하는 레이아웃을 만듭니다.
  • 일련의 요소에 대한 가로 또는 세로 레이아웃 축을 따라 여부의 공간을 재할당하여 지정된 요소의 크기를 늘리는 방법을 지정합니다.
  • 일련의 요소에 대한 레이아웃 축(가로 또는 세로)을 따라 여분의 공간을 재할당하여 일련의 요소 앞, 뒤 또는 사이에 배치하는 방법을 지정합니다.
  • 요소 레이아웃 축과 수직인 여분의 공간(예: 나란히 놓인 단추 위 또는 아래의 추가 공간)을 요소 주변 영역으로 이동하는 방법을 지정합니다.
  • 지정된 writing-mode를 조정하지 않고 요소가 페이지에 배치되는 시각적 방향(예: 위에서 아래, 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 아래에서 위)을 제어합니다.
  • 화면에 있는 요소를 DOM(문서 개체 모델)에 지정된 방식과 다른 순서로 다시 정렬합니다.

다음 예제에서는 플렉스박스를 사용하여 좁은 디스플레이에 맞는 단일 열 레이아웃으로 압축되는 넓은 화면에 대해 열이 세 개인 기본 페이지 레이아웃을 만드는 방법을 보여 줍니다.

코드 예제 http://samples.msdn.microsoft.com/workshop/samples/css/flexbox/flexbox.html

플렉스박스 컨테이너 및 플렉스 항목

플렉스박스 레이아웃을 사용하도록 설정하려면 먼저 플렉스 컨테이너를 만듭니다. 플렉스 컨테이너는 해당 콘텐츠(플렉스 항목)의 포함 블록을 형성합니다. 플렉스 컨테이너를 만들려면 display를 요소에 적용하고 flex 또는 inline-flex로 설정합니다.

display: flex | inline-flex

displayflex로 설정하면 요소가 블록 수준 플렉스 컨테이너 상자처럼 동작합니다. 블록 수준 컨테이너 박스는 부모 컨테이넌 내부에서 사용할 수 있는 전체 너비를 차지합니다. displayinline-flex로 설정하면 요소가 인라인 수준 플렉스 컨테이너처럼 동작하므로 공간을 필요한 만큼만 차지하고 강제로 줄 바꿈되지 않습니다.

플렉스 컨테이너 외부의 기타 요소와 관련하여 인라인 수준 플렉스 컨테이너는 이미지와 유사하게 동작합니다. 블록 수준 플렉스 컨테이너는 일반 div 요소와 유사하게 동작합니다.

플렉스 컨테이너에는 0개 이상의 플렉스 항목이 포함될 수 있습니다. 플렉스 컨테이너의 각 자식 항목은 플렉스 항목이 됩니다. 플렉스 컨테이너의 바로 안에 있는 텍스트는 익명 플렉스 항목으로 줄 바꿈됩니다. 그러나 익명 플렉스 항목에 공백만 포함된 경우 이 항목은 렌더링되지 않고 display: none으로 설정된 것과 유사합니다. 플렉스 컨테이너 및 플렉스 컨테이너 내 플렉스 항목은 flex, flex-basis, flex-grow, flex-shrink, flex-flow, flex-direction, flex-wrap, align-items, align-self, align-content, justify-contentorder 속성을 사용하여 조작할 수 있습니다.

플렉스박스 방향, 줄 바꿈 및 순서 설정

플렉스 컨테이너를 만드는 경우 컨테이너 내 모든 자식 요소의 방향을 지정할 수 있습니다. flex-direction 속성은 플렉스 컨테이너에서 플렉스 항목이 배치되는 기준이 되는 주 축 또는 기본 축의 방향을 설정합니다. flex-direction 속성을 사용하면 자식을 오른쪽에서 왼쪽, 왼쪽에서 오른쪽, 위에서 아래 또는 아래에서 위로 표시할지 지정할 수 있습니다.

또한 플렉스 컨테이너의 크기를 조정할 때 플렉스 항목을 줄 바꿈할 방법을 지정할 수 있습니다. flex-wrap 속성은 자식 요소를 단일 또는 복수 행이나 열로 줄 바꿈할지 여부를 지정합니다.

때로는 flex-flow 단축형 속성을 사용하여 flex-directionflex-wrap을 모두 설정하는 것이 더 쉬운 경우가 있습니다. 이러한 두 하위 속성은 모두 플렉스 컨테이너의 주 축 및 교차 축을 정의합니다.

flex-flow: <flex-direction> || <flex-wrap>

필요한 경우 order 속성이 플렉스 항목을 시각적으로 다시 정렬할 수 있습니다. 기본적으로 플렉스 컨테이너 내 플렉스 항목은 이 속성을 사용하여 변경하는 경우를 제외하고 원본 문서와 동일한 순서로 표시됩니다.


#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  order: 2;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  order: 3;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  order: 1;
}


<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

위의 CSS 코드 조각에서 flex-flow 단축형에 있는 첫 번째 속성 하위 값인 row는 현재 쓰기 모드의 인라인 축과 동일한 방향으로 플렉스 컨테이너의 주 축을 설정합니다. 이 예제에서 기본적으로 쓰기 모드는 가로 방향인 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 이동합니다. flex-flow 단축형의 두 번째 속성 하위 값인 wrap는 플렉스 항목이 줄 바꿈되고 연속된 행에 표시됨을 지정합니다. 여기서 플렉스 컨테이너 크기를 조정하는 경우 추가 행 또는 열을 수용하도록 writing-mode 속성에서 정의한 축에 수직으로 플렉스 컨테이너의 높이가 확장됩니다.

플렉스박스를 사용하는 HTML 요소

플렉스 컨테이너 크기가 감소하면 이 이미지와 같이 flex-flow 속성에 지정된 대로 플렉스 항목이 별도의 행에 표시됩니다. order 속성도 사용되므로 플렉스 항목은 원본 문서에 지정된 것과 동일한 순서로 표시되지 않습니다.

플렉스박스 맞춤 설정

또한 유연한 길이 및 자동 여백을 확인한 후에 주 축 및 교차 축(주 축에 수직)을 따른 플렉스 컨테이너의 콘텐츠 맞춤을 지정할 수 있습니다. justify-content, align-items, align-selfalign-content 속성을 사용하여 이 맞춤을 조정할 수 있습니다.

유연한 길이 및 자동 여백이 확인되고 나면 justify-content 속성을 사용하여 플렉스 컨테이너의 주 축을 따라 플렉스 항목을 맞추는 방법을 설정할 수 있습니다. 다음 그림에서는 justify-content의 값 및 이 값이 3개의 플렉스 항목이 포함된 플렉스 컨테이너에 미치는 효과를 보여 줍니다.

justify-content 값을 보여 주는 그림

맞춤을 추가로 조정하려면 align-items 속성을 사용하여 플렉스 컨테이너의 교차 축 맞춤을 조정할 수도 있습니다. 교차 축은 주 축에 수직인 축입니다. 다음 그림에서는 align-items의 값 및 이 값이 3개의 플렉스 항목이 포함된 플렉스 컨테이너에 미치는 효과를 보여 줍니다.

플렉스 항목에서 align-self 속성을 지정하여 align-items의 모든 플렉스 항목에 할당된 값을 재정의할 수도 있습니다. Align-self는 플렉스 항목의 맞춤 값(flex-direction 속성에서 정의된 레이아웃 축에 수직)을 설정합니다. 초기 값은 auto로, 이는 기본적으로 align-self 속성이 부모의 align-items 속성과 동일하다는 의미입니다. align-items 속성은 auto 외에 align-items와 동일한 값을 사용합니다. 위의 그림은 이러한 값과 값이 미치는 영향을 보여 줍니다.

align-properties 값을 보여 주는 그림

justify-content 속성과 유사하게 동작하는 align-content 속성을 사용하여 맞춤을 추가로 조정할 수 있습니다. 그러나 align-content 속성은 플렉스박스에 선이 여러 개 있는 경우에만 적용됩니다. align-content 속성은 교차 축에 추가 공간이 있는 경우 플렉스 컨테이너 안에 있는 플렉스 컨테이너의 선을 정렬합니다. 이 이미지는 align-content의 값 및 이 값이 3개의 플렉스 항목이 포함된 플렉스 컨테이너에 미치는 효과를 보여 줍니다.

align-items 및 align-content 값을 보여 주는 그림

유연성 설정

필요한 경우 플렉스 컨테이너에서 공간을 채우는 플렉스 항목의 너비 및 높이를 변경할 수 있습니다. 이렇게 하려면 flex 단축형 속성을 사용합니다. 플렉스 컨테이너는 플렉스 확장 요소에 비례하여 여유 공간을 항목에 분산하거나, 플렉스 축소 요소에 비례하여 넘치지 않도록 항목을 축소합니다.

단축형 flex는 하위 속성 flex-grow, flex-shrinkflex-basis를 사용하여 정의됩니다.

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  flex: 1 1 auto;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}


<div id="flexContainer">
   <div id="item1">flex item 1</div>
   <div id="item2">flex item 2</div>
   <div id="item3">flex item 3</div>
</div>

위의 예제에서 flex 단축형의 첫 번째 하위 값은 flex-grow 속성에 해당합니다. 이 속성은 flex growth 요소 또는 플렉스 컨테이너의 다른 항목을 기준으로 플렉스 항목이 확대되는 방법을 제어합니다. 두 번째 하위 값은 flex-shrink 속성에 해당합니다. 이 속성은 플렉스 컨테이너의 다른 항목을 기준으로 플렉스 항목을 축소하는 방법을 제어합니다. 세 번째 하위 값은 flex-basis 속성에 해당합니다. 이 속성은 여유 공간이 분산되기 전에 플렉스 항목의 초기 기본 크기를 지정합니다. 초기 기반 크기는 주(기본) 축을 따라 플렉스 항목의 너비 또는 높이입니다. 초기 값은 auto이며, 플렉스 컨테이너의 기본 크기 값을 검색합니다.

이 예제에서 플렉스 항목은 완전히 유연하며 주 축에서 사용할 수 있는 여유 공간 중 하나 흡수할 수 있습니다.

API 참조

Flexible Box ("Flexbox") Layout

샘플 및 자습서

CSS 플렉스박스
적응 웹 사이트 디자인

Internet Explorer 테스트 드라이브 데모

실습: CSS3 유연한 상자 레이아웃

IEBlog 게시물

IE10 Platform Preview 및 적응 레이아웃을 위한 CSS 기능

사양

W3C CSS 유연한 상자 레이아웃 모듈

 

 

표시:
© 2014 Microsoft