1. Home
  2. CSS3 상자 팩 속성

최고의 CSS3 상자 팩 속성 튜토리얼 2024년, 이 튜토리얼에서는 예,브라우저 지원,정의 및 지침을 속성,문법,를 배울 수 있습니다.

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;
}

»시도

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

현재 주류 브라우저는 상자 팩 속성을 지원하지 않습니다.

대신 지원하는 -ms-플렉스 팩 속성 속성을 사용하여 인터넷 익스플로러 10.

MOZ 박스 팩 지원 - 개인 재산으로 파이어 폭스.

개인 속성 -webkit-상자 팩 지원을 통해 사파리, 오페라, 그리고 크롬.

참고 : 인터넷 익스플로러 9 IE 이전 버전의 유연 상자를 지원하지 않습니다.

정의 및 지침을 속성

자식 요소가 상자의 하위 요소에 배치되는 경우 박스 팩 상자 속성 박스보다 작다 지정한다.

이 속성은 크로스 프레임 수평 위치, 수직 프레임의 수직 위치를 지정합니다.

기본값 : 스타트
상속 : 아니
버전 : CSS3
자바 스크립트 구문 : .style.boxPack = "센터"반대

문법

box-pack: start|end|center|justify;

값 설명
스타트 상자의 일반 방향를 들어, 첫 번째 아이는 왼쪽 (서 결국 여분의 공간의 마지막 자식 요소)의 왼쪽 가장자리에 배치됩니다. 역방향 박스 마지막 하위 요소의 오른쪽 에지 (모든 여분의 공간의 첫번째 하위 요소 앞에 위치)가 우측에 배치되고
끝 정상 방향으로 상자를 들어, 오른쪽 가장자리의 마지막 자식 요소는 오른쪽 (전에 모든 첫 번째 자식 여분의 공간)에 배치했다. 역방향 박스, 왼쪽 왼쪽 모서리의 첫 번째 자식 (서 결국 추가 공간의 마지막 하위 요소)
센터 여분의 공간이 반으로 균등하게 분할되어, 상반기 마지막 자식 요소의 나머지 절반을 배치, 첫 아이를 배치
정당화 각 서브 엘리먼트에 할당 된 평균 추가적인 공간

핫 튜토리얼

Contact US

CSS3 상자 팩 속성
10/30