CSS3 상자 팩 속성
예
박스 정렬 및 상자 팩 중심의 속성을 모두 사용하여 사업부의 자식 요소 :
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
»시도
브라우저 지원
현재 주류 브라우저는 상자 팩 속성을 지원하지 않습니다.
대신 지원하는 -ms-플렉스 팩 속성 속성을 사용하여 인터넷 익스플로러 10.
MOZ 박스 팩 지원 - 개인 재산으로 파이어 폭스.
개인 속성 -webkit-상자 팩 지원을 통해 사파리, 오페라, 그리고 크롬.
참고 : 인터넷 익스플로러 9 IE 이전 버전의 유연 상자를 지원하지 않습니다.
정의 및 지침을 속성
자식 요소가 상자의 하위 요소에 배치되는 경우 박스 팩 상자 속성 박스보다 작다 지정한다.
이 속성은 크로스 프레임 수평 위치, 수직 프레임의 수직 위치를 지정합니다.
| 기본값 : | 스타트 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | .style.boxPack = "센터"반대 |
문법
box-pack: start|end|center|justify;
| 값 | 설명 |
|---|---|
| 스타트 | 상자의 일반 방향를 들어, 첫 번째 아이는 왼쪽 (서 결국 여분의 공간의 마지막 자식 요소)의 왼쪽 가장자리에 배치됩니다. 역방향 박스 마지막 하위 요소의 오른쪽 에지 (모든 여분의 공간의 첫번째 하위 요소 앞에 위치)가 우측에 배치되고 |
| 끝 | 정상 방향으로 상자를 들어, 오른쪽 가장자리의 마지막 자식 요소는 오른쪽 (전에 모든 첫 번째 자식 여분의 공간)에 배치했다. 역방향 박스, 왼쪽 왼쪽 모서리의 첫 번째 자식 (서 결국 추가 공간의 마지막 하위 요소) |
| 센터 | 여분의 공간이 반으로 균등하게 분할되어, 상반기 마지막 자식 요소의 나머지 절반을 배치, 첫 아이를 배치 |
| 정당화 | 각 서브 엘리먼트에 할당 된 평균 추가적인 공간 |