CSS3는 새로운 상자 모델, 즉 상자가 다른 상자 사이에 배포되는 방법과 사용 가능한 공간을 처리하는 방법을 결정하는 플렉스 상자 모델을 도입합니다. 이는 XUL(Firefox에서 사용하는 사용자 상호작용 언어)과 유사하며, XAML, GladeXML 등 다른 언어도 동일한 박스 모델을 사용합니다.
이 모델을 사용하면 브라우저 창에 맞춰지는 유동적인 레이아웃이나 글꼴 크기에 맞춰지는 유연한 레이아웃을 쉽게 만들 수 있습니다. 이 문서의 예제에서는 다음 HTML 코드를 사용합니다.
<본문>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
전통적인 상자 모델은 HTML 흐름을 기반으로 상자를 수직으로 배열합니다. Flexbox 모델을 사용하면 특정 순서를 지정하고 이를 되돌릴 수 있습니다. 유연한 상자 모델을 활성화하려면 하위 상자가 있는 상자의 표시 속성 값을 상자(또는 인라인 상자)로 설정하면 됩니다.
디스플레이: 상자;
수평 또는 수직 분포
"box-orient"는 분포의 좌표축(세로 및 가로)을 정의합니다. 이 두 값은 상자가 표시되는 방식을 정의합니다
몸{
디스플레이: 상자;
상자 방향: 수평;
}
역분포
"box-direction"은 상자가 나타나는 순서를 설정할 수 있습니다. 기본적으로 배포 축만 정의하면 됩니다. 상자는 html 흐름을 통해 배포됩니다. 가로축인 경우 왼쪽에서 오른쪽으로 분포되고, 세로축인 경우 위에서 아래로 분포됩니다. 상자의 순서를 바꾸려면 "box-direction" 속성 값을 "reverse"로 정의합니다.
몸 {
디스플레이: 상자;
상자 방향: 수직;
상자 방향: 반대;
}
특정 분포
"box-ordinal-group" 속성은 상자가 배포되는 순서를 정의합니다. 배포 순서는 마음대로 제어할 수 있습니다. 그룹은 "1"부터 시작하는 숫자로 정의되며 상자 모델은 이러한 그룹을 먼저 배포하고 모든 상자는 각 그룹에 포함됩니다. 배포는 작은 것부터 큰 것 순으로 이루어집니다.
몸 {
디스플레이: 상자;
상자 방향: 수직;
상자 방향:역방향;
}
#상자1 {
상자 순서 그룹: 2;
}
#박스2 {
상자 순서 그룹: 2;
}
#상자3 {
상자 순서 그룹: 1;
}
