>  기사  >  웹 프론트엔드  >  CSS box-pack 속성을 사용하는 방법

CSS box-pack 속성을 사용하는 방법

silencement
silencement원래의
2019-05-27 17:10:593048검색

CSS box-pack 속성을 사용하는 방법

css box-pack 속성 정의 및 사용법

1에는 box-pack 속성이 새로 추가되었습니다. css3 속성은 상자가 하위 요소의 크기보다 클 때 하위 요소를 배치할 위치를 지정하는 데 사용됩니다. 현재 주류 브라우저는 이 속성을 지원하지 않지만 일부 브라우저는 상자의 효과를 얻기 위해 자체 비공개 속성을 가지고 있습니다. -팩 속성.

2. Internet Explorer 10은 box-pack 속성을 지원하는 대신 -ms-flex-pack 속성을 사용할 수 있습니다. Internet Explorer 10 이전 버전은 이 속성을 지원하지 않습니다. Firefox 커널 브라우저는 개인 속성 -moz-box-pack 속성을 통해 대신 box-pack 속성을 지원할 수 있습니다. Safari, Opera 및 Chrome 브라우저는 대신 private attribute-webkit-box-pack 속성

css box-pack 속성 구문 형식#을 통해 box-pack 속성을 지원할 수 있습니다. 🎜🎜#

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

속성 값 설명

start: 일반 방향의 상자의 경우 왼쪽 가장자리의 첫 번째 하위 요소가 왼쪽에 배치됩니다(모두 마지막 하위 요소 뒤에 추가 공간이 배치됩니다. 반전된 상자의 경우 마지막 하위 요소가 오른쪽 가장자리에 배치됩니다(모든 추가 공간은 첫 번째 하위 요소 앞에 배치됩니다)

end: 일반 방향 상자의 경우 마지막 하위 요소가 오른쪽 가장자리에 배치됩니다. 오른쪽에 배치됩니다(모든 추가 공간은 첫 번째 하위 요소 앞에 배치됩니다). 역방향 상자의 경우 첫 번째 자식의 왼쪽 가장자리가 왼쪽에 배치됩니다(모든 추가 공간은 마지막 자식 요소 뒤에 배치됩니다)

center: 두 부분 사이에 균등하게 나누어진 추가 공간, 첫 번째 자식 요소 절반은 첫 번째 하위 요소를 배치하고 나머지 절반은 마지막 하위 요소를 배치합니다

justify: 추가 공간이 각 하위 요소에 균등하게 분배됩니다

Example#🎜🎜 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-pack属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:center;/* W3C */
-ms-flex-pack:center;/* Internet Explorer 10 */
-moz-box-pack:center;/* Firefox */
-webkit-box-pack:center;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:justify;/* W3C */
-ms-flex-pack:justify;/* Internet Explorer 10 */
-moz-box-pack:justify;/* Firefox */
-webkit-box-pack:justify;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

실행 결과

CSS box-pack 속성을 사용하는 방법

위 내용은 CSS box-pack 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.