& 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>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요