CSS 박스 플렉스 속성
번역 결과：
& vi. Boxing
인스턴스 실행 »
3인칭 단수: 상자 복수형: 상자 현재 분사: boxing 과거 시제: boxed 과거 분사: boxed
flex
영어 [fleks] American [flɛks] v. 수축(근육); 힘을 나타냄n. [전기] 꽃줄 3인칭 단수: 굴곡 현재 분사: 굴곡 과거 분사: 굴곡CSS 박스 플렉스 속성통사론
기능: 상자의 하위 요소가 크기를 확장하거나 축소할 수 있는지 여부를 지정합니다.
구문: box-flex: value;
설명: value 확장 가능한 요소 행입니다. 유연성은 상대적입니다. 예를 들어 box-flex가 2인 하위 요소는 box-flex가 1인 하위 요소보다 두 배 더 유연합니다.
참고: 확장 가능한 요소는 상자가 축소되거나 확장됨에 따라 축약되거나 확대될 수 있습니다. 상자에 추가 공간이 있을 때마다 확장 가능한 요소가 확장되어 해당 공간을 채웁니다. 현재 box-flex 속성을 지원하는 브라우저는 없습니다. Firefox는 대체 -moz-box-flex 속성을 지원합니다. Safari, Opera 및 Chrome은 대체 -webkit-box-flex 속성을 지원합니다.
CSS 박스 플렉스 속성예
<!DOCTYPE html>
<html>
<head>
<style>
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">php中文网</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요