CSS3 Flex Box
Flex Box는 CSS3의 새로운 레이아웃 모드입니다.
CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다.
Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.
CSS3 유연한 상자 콘텐츠
Flexible 상자는 Flex 컨테이너와 Flex 항목으로 구성됩니다.
플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.
유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.
참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.
Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.
다음 요소는 elastic 하위 요소가 왼쪽에서 오른쪽으로 한 줄로 표시되는 것을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>다음은 간단한 예를 통해 이전 버전의 각 속성을 설명합니다.
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>위 결과는 정상입니다. 다음 예를 살펴보세요:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
<p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>보세요, 이제 모든 p 요소가 상자가 되었습니다. 이것은 유연한 레이아웃의 마법입니다!
위에서는 div 요소의 표시를 가변 레이아웃의 이전 버전인 상자로 설정했습니다. 이전 브라우저 버전의 경우 -webkit- 접두사를 추가해야 합니다.
탄력적 레이아웃의 이전 버전에는 두 가지 속성 값이 있습니다.
box: 컨테이너 상자 모델을 블록 수준 탄성 상자로 표시합니다. inline-box: 컨테이너 상자 모델을 인라인 수준 탄성 상자로 표시합니다.
PS: 우리는 블록 수준에서는 div 요소와 같이 전체 줄을 차지하지만 인라인 수준에서는 범위 요소와 같이 전체 줄을 차지하지 않습니다. 하지만 우리는 상자 전체를 아무도 차지하지 않도록 설정하여 일관성을 유지했습니다. 위의 예와 마찬가지로 div 요소에 상자가 설정되면 div 요소 내부의 p 요소는 차지되지 않습니다.
box-orient 속성
box-orient 속성은 주로 상자 내부 요소의 흐름 방향을 구현합니다.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}이때의 결과는 세로 배열입니다.
이 속성의 속성 값은 다음과 같습니다.
horizontal: 플렉스 항목이 왼쪽에서 오른쪽으로 가로로 배열됩니다. Vertical: 플렉스 항목이 왼쪽에서 세로로 배열됩니다. 위에서 아래로 inline-axis: flex 항목이 인라인 축을 따라 배열되고 표시됩니다. block-axis: 유연한 항목이 블록 축을 따라 배열되고 표시됩니다.
시도해 볼 수도 있습니다. 가로 및 inline-축이 모두 가로로 배열됩니다. 수직 및 블록 축은 모두 수직으로 배열됩니다.
상자 방향 속성
box-direction 속성은 주로 확장 가능한 컨테이너에서 흐름 순서를 설정하는 데 사용됩니다.
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}이 속성의 속성 값은 다음과 같습니다.
normal : 일반 순서, 기본값 reverse : 역순
box-pack 속성
box-pack 속성은 확장 가능한 프로젝트의 배포 방법에 사용됩니다.
이 속성의 속성 값은 다음과 같습니다.
start : 망원형 항목이 시작점에 정렬됩니다 end : 망원형 항목이 끝점에 정렬됩니다 center : 망원형 항목이 중심점에 정렬됩니다 justify : 망원 아이템은 고르게 분포되어 있습니다
아래에서 모두 시도해 보겠습니다. 각 속성 값의 효과를 살펴보겠습니다.
시작 속성 값:
div{
-webkit-box-pack:start;
box-pack:start;
}2.end 속성 값:
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3.center 속성 값:
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4.justify 속성값:
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}PS: 수직 방향에도 같은 원리가 적용되지만 높이가 자동이면 효과가 나오지 않습니다. 따라서 높이에 대한 고정 높이를 설정해야 합니다(기본값보다 높은 것이 바람직함). 이때 수직방향으로 효과를 볼 수 있습니다. 여기서는 자세히 다루지 않겠습니다.
box-align 속성
box-align 속성은 확장 가능한 컨테이너의 추가 공간을 처리하는 데 사용됩니다.
이 속성의 속성 값은 다음과 같습니다.
시작 ： 텔레스코픽 프로젝트는 상단을 기준으로 하고 하단의 추가 공간은 지워집니다. 끝 ： 텔레스코픽 프로젝트는 하단을 기준으로 하며 상단 부분의 추가 공간이 중앙에서 지워집니다. ： 텔레스코픽 프로젝트는 중앙을 기반으로 하며 상단과 하단 부분이 균등하게 지워집니다. 추가 공간 기준선: 확장 가능한 프로젝트가 기준선을 기반으로 하며 추가 공간을 비웁니다. 스트레치: 확장 가능한 프로젝트 전체 컨테이너를 기본값인
채웁니다. 마찬가지로 각 속성 값의 효과를 시도해 보겠습니다.
1.start 속성 값
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
} 2.end 속성 값
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}3.center 속성 값
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}4. 기준선 속성 값
box-orient가 인라인 단일 축 또는 수평인 경우 모든 하위 요소는 기준선에 맞춰 정렬됩니다.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}그리고 상자 방향이 블록 축 또는 수직인 경우 모든 하위 요소는 중앙에 수직으로 정렬됩니다.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}5.stretch 속성 값
모든 하위 요소는 포함 블록을 채우기 위해 늘어납니다.
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}box-flex 속성
box-flex 속성은 부동 소수점 숫자를 사용하여 확장 가능한 항목의 비율을 할당할 수 있습니다. 이 속성은 컨테이너의 항목에 대해 설정됩니다. 상위 컨테이너의 너비를 기준으로 비율을 할당합니다.
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
}p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}물론 일부 항목은 고정 너비를 가질 수 있으며 다른 항목도 나머지 너비를 할당합니다. 예를 들어, 여기에서 첫 번째 p 요소는 고정 너비로 설정되어 있습니다.
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}더 많은 사용법을 보려면 천천히 직접 시도해 보세요.
box-ordinal-group 속성
box-ordinal-group 속성은 플렉스 아이템의 표시 위치를 설정할 수 있습니다.
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}보시다시피 첫 번째 p 요소는 2위, 두 번째 p 요소는 3위, 세 번째 p 요소는 1위를 차지합니다. 이 속성은 p 요소에 대해 개별적으로 설정할 수 있으며 다른 항목은 원래 순서대로 변경됩니다.
자, 그럼 이전 버전의 모든 속성을 간략하게 소개했습니다. 좀 더 복합적으로 사용하려면 필요에 따라 직접 연습해 보세요.
다음은 수평 및 수직 중앙 정렬의 예입니다.
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}이번에는 p 요소에 고정 높이를 설정했습니다.
p{
width:150px;
height:200px;
}CSS3 가변 상자 속성
다음 표에는 가변 상자에 일반적으로 사용되는 속성이 나열되어 있습니다.
속성 HTML 요소 상자 유형을 지정합니다.
flex-direction은 플렉스 컨테이너의 하위 요소 배열을 지정합니다.
