Internet Explorer 10의 "플렉스박스"(유연한 상자) 레이아웃

참고  이 내용은 Internet Explorer 10의 CSS 유연한 상자에 적용됩니다. 플렉스박스에 대한 최신 개요 정보는 유연한 상자 레이아웃을 참조하세요.
주의  Internet Explorer 11은 더 이상 Microsoft 공급업체 접두사("-ms-") 버전의 플렉스박스 속성을 지원하지 않습니다. 대신 접두사가 없는 이름을 사용해야 합니다. 이를 통해 표준을 보다 효율적으로 준수하고 이후에도 계속 호환성을 유지할 수 있습니다. 변경 사항에 대한 요약 및 모범 사례를 확인하려면 "플렉스박스"(유연한 상자) 레이아웃 업데이트를 참조하세요.

Internet Explorer 10 및 Windows 8의 JavaScript를 사용하는 Windows 스토어 앱은 CSS 유연한 상자 레이아웃 모듈("플렉스박스")을 새롭게 지원합니다. 이 글을 쓰는 시점에 플렉스박스 모듈은 W3C(World Wide Web 컨소시엄) 작업 초안 단계입니다. Internet Explorer 10의 플렉스박스 구현은 2012년 3월 22일 목요일 플렉스박스 작업 초안 버전을 기반으로 합니다. 플렉스박스는 CSS2.1(Cascading Style Sheets, Level 2 Revision 1)에서 정의되고 display 속성을 통해 사용할 수 있는 네 가지 기본 레이아웃 모드(블록 레이아웃, 인라인 레이아웃, 표 레이아웃 및 배치된 레이아웃)에 추가됩니다. 플렉스박스 레이아웃은 복잡한 웹 페이지 레이아웃에 사용됩니다. 특히 화면과 브라우저 창 크기가 변경되더라도 요소의 상대적 위치 및 크기를 일정하게 유지하는 데 유용합니다. 플렉스박스는 정확한 위치 및 크기 지정이 훨씬 복잡한 부동 기능에 대한 의존도를 줄일 수 있습니다.

플렉스박스 레이아웃은 상자 크기를 정의할 때 사용 가능한 공간을 고려하여 상대적인 크기와 위치를 사용합니다. 예를 들면 브라우저 창에 있는 별도의 공백을 여러 자식 요소의 크기에 고르게 분산하고, 그러한 자식 요소가 포함 블록의 가운데에 오도록 할 수 있습니다.

플렉스박스 레이아웃을 사용하여 다음을 수행할 수 있습니다.

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

플렉스박스 컨테이너

플렉스박스 레이아웃을 사용하도록 설정하려면 먼저 플렉스박스 컨테이너를 만들어야 합니다. 그렇게 하려면 요소의 display 속성을 "-ms-flexbox"(블록 수준 플렉스박스 컨테이너) 또는 "-ms-inline-flexbox"(인라인 플렉스박스 컨테이너)로 설정합니다. CSS 유연한 상자 레이아웃 모듈 초안은 임시 상태이기 때문에 Internet Explorer 10 및 JavaScript로 작성된 Windows 8의 Windows 스토어 앱에서 작업하려면 이 값과 이 섹션의 모든 속성을 Microsoft 특정 공급업체 접두사인 "-ms-"와 함께 사용해야 합니다. 예를 들어 다음 코드 예제에서는 ID가 "myFlexbox"인 요소 내에 블록 수준 플렉스박스 컨테이너를 만듭니다.


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>


플렉스박스 방향 설정

플렉스박스 컨테이너를 만들 때 방향을 설정할 수도 있습니다. 즉, 자식을 오른쪽에서 왼쪽, 왼쪽에서 오른쪽, 위에서 아래 또는 아래에서 위로 표시할지 지정합니다. 이 작업을 수행하는 속성은 다음과 같습니다.

속성설명

-ms-flex-direction

개체의 모든 자식 요소에 대한 레이아웃 방향을 지정합니다.

이 속성에는 다음 키워드 값을 사용할 수 있습니다.

row

초기값입니다. 소스 문서에 선언된 순서와 동일한 순서로 자식 요소가 왼쪽에서 오른쪽으로 표시됩니다.

-ms-box-orient:horizontal 예제
column

소스 문서에 선언된 순서와 동일한 순서로 자식 요소가 하향식으로 표시됩니다.

-ms-box-orient:vertical 예제
row-reverse

소스 문서에 선언된 순서와 동일한 순서로 자식 요소가 오른쪽에서 왼쪽으로 표시됩니다.

-ms-box-direction:normal 예제
column-reverse

소스 문서에 선언된 순서와 동일한 순서로 자식 요소가 상향식으로 표시됩니다.

inherit

부모 요소의 계산된 이 속성 값과 같은 순서로 자식 요소가 표시됩니다.

 

예를 들어 다음 ID 선택기는 -ms-flex-direction 속성을 추가하고 row로 설정했습니다.


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>


플렉스박스 맞춤 설정

플렉스박스 컨테이너를 만들 때 맞춤을 설정할 수도 있습니다. 즉, -ms-flex-direction 속성에 정의된 레이아웃 축에 수직으로 자식을 표시할 방향을 지정합니다.

속성설명

-ms-flex-align

개체의 자식 요소에 대한 맞춤(-ms-flex-direction 속성으로 정의된 레이아웃 축에 수직으로)을 지정합니다.

이 속성에는 다음 키워드 값을 사용할 수 있습니다. 이러한 키워드는 writing-mode 종속 키워드입니다. 부모 요소와 자식 요소의 시작 가장자리 및 자식 요소의 후행 가장자리 모두 레이아웃 방향에 따라 달라집니다. 예를 들어, 왼쪽에서 오른쪽 방향 레이아웃의 경우 시작 가장자리는 부모 요소의 위쪽 가장자리이고, 하향식 레이아웃의 경우 시작 가장자리는 부모 요소의 왼쪽 가장자리와 같은 식입니다. 마찬가지로 왼쪽에서 오른쪽 방향 레이아웃의 경우 자식 요소의 후행 가장자리는 아래쪽 가장자리이고, 하향식 레이아웃의 경우 자식 요소의 후행 가장자리는 오른쪽 가장자리와 같은 식입니다.

start

부모 요소에 -ms-flex-direction의 계산된 값 row 또는 column이(가) 있는 경우 각 자식 요소의 시작 가장자리(또는 기준)는 개체의 시작 가장자리에 맞춥니다. 레이아웃 축에 수직인 나머지 공간은 각 자식 요소의 후행 가장자리 다음에 둡니다.

부모 요소에 -ms-flex-direction의 계산된 값 row-reverse 또는 column-reverse이(가) 있는 경우 각 자식 요소의 후행 가장자리(또는 기준)는 개체의 후행 가장자리에 맞춥니다. 레이아웃 축에 수직인 나머지 공간은 각 자식 요소의 시작 가장자리 앞에 둡니다.

-ms-box-align:before 예제
end

부모 요소에 -ms-flex-direction의 계산된 값 row 또는 column이(가) 있는 경우 각 자식 요소의 후행 가장자리는 개체의 후행 가장자리에 맞춥니다. 레이아웃 축에 수직인 나머지 공간은 각 자식 요소의 시작 가장자리 앞에 둡니다.

부모 요소에 -ms-flex-direction의 계산된 값 row-reverse 또는 column-reverse이(가) 있는 경우 각 자식 요소의 시작 가장자리는 개체의 시작 가장자리에 맞춥니다. 레이아웃 축에 수직인 나머지 공간은 각 자식 요소의 후행 가장자리 다음에 둡니다.

-ms-box-align:after 예제
center

각 자식 요소는 개체의 시작 및 후행 가장자리 사이의 중간에 있습니다. 레이아웃 축에 수직인 나머지 공간은 각 자식 전후에 고르게 배포됩니다.

-ms-box-align:middle 예제
stretch

초기값입니다. 각 자식 요소는 레이아웃 축에 수직인 사용 가능한 공간을 완전히 채우기 위해 확대됩니다. 설정된 경우 자식 요소의 max-width 또는 max-height 속성이 우선하며 레이아웃은 start 규칙에 따릅니다.

-ms-box-align:stretch 예제
baseline

모든 자식 요소의 기준(-ms-flex-direction 속성에 따라 시작 가장자리 또는 후행 가장자리)은 서로에 맞게 조정됩니다.

레이아웃 축에 수직인 대부분의 공간을 차지하는 자식 요소는 start 규칙에 따릅니다. 나머지 모든 요소의 기준은 이 요소의 기준에 맞춰 조정됩니다.

-ms-box-align:baseline 예제

 

예를 들어 다음 ID 선택기는 -ms-flex-align 속성을 추가하고 start로 설정했습니다.


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>


플렉스박스 자식 요소 간에 공백 배분

다음 속성을 사용하여 플렉스박스 자식 요소 간에 공백 배분을 지정할 수 있습니다.

속성설명

-ms-flex-pack

-ms-flex-direction 속성에 정의된 축을 따라 개체의 자식 요소 사이에 여분의 공간을 배분하는 방법을 지정합니다.

이 속성에는 다음 키워드 값을 사용할 수 있습니다. 이러한 키워드는 writing-mode 종속 키워드입니다. 부모 요소와 자식 요소의 시작 및 후행 가장자리는 레이아웃 방향에 따라 달라집니다. 예를 들어, 왼쪽에서 오른쪽 방향 레이아웃의 경우 시작 가장자리는 부모 요소의 왼쪽 가장자리입니다. 하향식 레이아웃의 경우 시작 가장자리는 위쪽 가장자리가 되는 식입니다. 마찬가지로 자식 요소의 끝 가장자리는 왼쪽에서 오른쪽 방향 레이아웃에서는 오른쪽 가장자리이며 하향식 레이아웃에서는 아래쪽 가장자리가 되는 식입니다.

start

초기값입니다. 레이아웃 축 방향에 따라 첫 번째 자식 요소의 시작 가장자리는 부모 요소의 시작에 두며, 다음번 자식 요소의 시작 가장자리는 첫 번째 자식 요소의 끝 가장자리와 가장자리를 맞대어 두는 식입니다. 레이아웃 축을 따라 남아 있는 모든 공간은 레이아웃 축의 끝에 둡니다.

-ms-box-pack:start 예제
end

첫 번째 자식 요소의 끝 가장자리는 부모 요소의 끝에 둡니다. 레이아웃 축 방향에 따라 다음번 자식 요소의 끝 가장자리는 첫 번째 자식 요소의 시작 가장자리와 가장자리를 맞대어 두는 식입니다. 레이아웃 축을 따라 남아 있는 모든 공간은 레이아웃 축의 시작에 둡니다.

-ms-box-pack:end 예제
center

start 또는 end 키워드의 설명에 표시된 대로 모든 자식 요소는 서로 가장자리를 맞대어 둡니다. 그러나 자식 요소의 그룹은 부모 요소의 시작 가장자리와 끝 가장자리 사이에 두므로 나머지 모든 공간은 첫 번째 자식 요소의 앞과 마지막 자식 요소의 뒤에 고르게 분산됩니다.

-ms-box-pack:center 예제
justify

첫 번째 자식 요소의 시작 가장자리는 부모 요소의 시작에 둡니다. 마지막 자식 요소의 끝 가장자리는 부모 상자의 끝과 가장자리를 맞대어 있고, 나머지 모든 자식은 첫 번째 자식 요소와 마지막 자식 요소 사이에 있으므로 레이아웃 축을 따라 남아 있는 모든 공간은 자식 요소 사이에 고르게 분배됩니다.

-ms-box-pack:justify 예제

 

예를 들어 다음 ID 선택기는 -ms-flex-pack 속성을 추가하고 justify로 설정했습니다.


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>


플렉스박스 자식 요소 줄 바꿈

다음 속성을 사용하여 오버플로된 플렉스박스 자식 요소가 다음 줄로 줄 바꿈되고 텍스트 방향을 제어하도록 설정할 수 있습니다.

속성설명

-ms-flex-wrap

자식 요소를 개체에서 사용할 수 있는 공간에 따라 여러 줄이나 열에 줄 바꿈 할지 여부를 지정합니다.

이 속성에는 다음 키워드 값을 사용할 수 있습니다.

none

초기값입니다. 모든 자식 요소는 하나의 행 또는 열에 표시됩니다. 개체의 overflow 속성에 따라 자식 요소를 숨기는지, 자르는지 아니면 확장 가능한지 결정됩니다.

wrap

자식 요소는 래핑되며 연속된 병렬 행 또는 열에 표시됩니다. 개체는 추가 행 또는 열을 수용하도록 writing-mode 속성에 정의된 축에 수직으로 높이 또는 너비가 확장됩니다.

-ms-box-line-progression:normal 예제
wrap-reverse

자식 요소는 래핑되어 연속된 병렬 행 또는 열에 역순으로 표시됩니다. 개체는 추가 행 또는 열을 수용하도록 writing-mode 속성에 정의된 축에 수직으로 높이 또는 너비가 확장됩니다.

-ms-box-line-progression:reverse 예제

 

Internet Explorer 10에서는 모든 상자를 최소 크기로 축소하여 부모 상자의 자식 요소에 필요한 줄 수를 가능한 한 줄이려고 합니다. 한 줄에 들어가지 않는 단일 요소는 줄 끝에서 잘립니다.

기본적으로 블록 방향을 유지하도록 줄이 추가됩니다. 위에서 아래 블록 방향이 명시적으로 정의되지 않은 경우 왼쪽에서 오른쪽 및 오른쪽에서 왼쪽 레이아웃에서 모두 기존 줄 아래에 새 줄이 추가됩니다. 마찬가지로, 새 줄이 세로 레이아웃의 오른쪽 또는 왼쪽에 표시되는지 여부는 블록 방향에 따라 달라집니다. 블록 방향은 쓰기 방향이나 다른 특정 설정에 따라 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽일 수 있습니다.

예를 들어 다음 ID 선택기는 -ms-flex-wrap 속성을 추가하고 wrap로 설정했습니다.


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>


플렉스박스 자식 요소 추가

플렉스박스 컨테이너를 만들었으며 이제 이 컨테이너에 자식 요소를 추가할 수 있습니다. 플렉스박스 컨테이너에 자식 요소를 추가하려면 다음 태그와 같이 요소를 플렉스박스 요소의 직계 자식으로 설정합니다.


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


자식 요소의 유연성 설정

부모 상자의 레이아웃 축에서 여분의 공간이 자식 요소에 비례적으로 배분되는 방식을 제어할 수 있습니다. -ms-flex 속성을 사용하면 플렉스박스 항목을 "유연"하게 만들어, 사용 가능한 공간을 채우도록 너비 또는 높이를 변경할 수 있습니다. 플렉스박스는 양의 유연성에 비례하여 여유 공간을 항목에 분산하거나, 음의 유연성에 비례하여 넘치지 않도록 항목을 축소합니다.

-ms-flex 속성을 포함하는 요소가 플렉스박스 항목이면, 항목의 기본 크기를 결정하는 데 width 또는 height 속성 대신 -ms-flex 속성이 사용됩니다. 요소가 플렉스박스 항목이 아니면 -ms-flex 속성은 효과가 없습니다.

속성설명

-ms-flex

개체에서 사용할 수 있는 공간에 따라 자식 요소의 너비 또는 높이가 유연한지 지정합니다. 이 값은 자식 요소에 할당된 사용 가능한 공간의 비율도 나타냅니다. 구문은 다음과 같습니다.


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

이 속성은 다음 값 중 하나 또는 none(으)로 설정할 수 있습니다.

<positive-flex>

양의 유연성을 설정하는 정수. 생략된 경우 요소의 양의 유연성은 "1"입니다. 음수 값은 올바르지 않습니다.

<negative-flex>

음의 유연성을 설정하는 정수. 생략된 경우 요소의 음의 유연성은 "0"입니다. 음수 값은 올바르지 않습니다.

<preferred-size>

플렉스박스 항목의 기본 설정 크기를 지정합니다. width 또는 height 속성의 올바른 값일 수 있습니다(inherit 제외). 생략된 경우 기본 설정 크기는 "0px"입니다. <preferred-size> 구성 요소가 플렉스박스의 자식에 있는 auto인 경우 기본 설정 크기는 플렉스박스 항목의 width 또는 height 속성(기본 축과 평행인 속성) 값입니다.

none

초기값입니다. -ms-flex을(를) "0 0 자동"으로 설정하는 것과 같습니다.

 

플렉스박스 자식 요소 그룹화

그룹 번호를 사용하여 각 요소가 레이아웃 축에 렌더링되는 순서를 제어하면 해당 순서가 DOM 순서와 다른 경우에도 플렉스박스 자식 요소를 그룹화할 수 있습니다. 그룹화를 설정하려면 다음 속성을 사용합니다.

속성설명

-ms-flex-order

플렉스박스 요소가 속한 서수 그룹을 지정합니다. 이 정수는 -ms-flex-direction 속성에 정의된 축을 따라 그룹을 표시할 순서를 식별합니다.

값은 0보다 큰 정수여야 합니다. 이 속성의 초기값은 "0"입니다.

 

-ms-flex-order 속성을 사용하면 서수 그룹 0부터 시작하여 서수 그룹에 요소를 배치할 수 있습니다. 각 서수 그룹의 모든 자식 요소는 다음 서수 그룹의 자식 요소가 렌더링되기 전에 지정한 레이아웃 축에 렌더링됩니다. 따라서 서수 그룹 0의 모든 자식 요소는 서수 그룹 1의 자식 요소보다 먼저 렌더링됩니다. 서수 그룹 내의 요소는 DOM 순서대로 렌더링됩니다. 기본적으로 블록 방향으로 줄이 추가됩니다.

예를 들어 다음 태그는 4가지 자식 요소를 정의하고 -ms-flex-order 속성을 사용하여 대부분의 자식 요소에 서수 값을 할당합니다.


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


child2child4는 모두 서수 그룹 0에 있고 child1child3은 모두 서수 그룹 1에 있습니다. 각 서수 그룹 내에서는 자식 요소가 DOM 순서에 따라 렌더링되기 때문에 부모 플렉스박스 요소에서 child2, child4, child1, child3 순서로 표시됩니다. 다음 스크린샷에서 확인할 수 있습니다.

브라우저 창의 이전 샘플 스크린샷

이 페이지를 보세요. 이 페이지를 올바르게 보려면 Internet Explorer 10이 필요합니다.

관련 항목

유연한 상자 레이아웃

 

 

표시:
© 2015 Microsoft