CSS3 상자 플렉스 속성
예
이 유연한 페이지 요소를 정의합니다. 상위 상자의 전체 폭이 300 픽셀 인 경우의 # P1는 100 픽셀의 폭을 가질 것이다 #의 P2는 200 픽셀의 폭을 가질 것이다 :
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
-ms-flex:2.0; /* Internet Explorer 10 */
box-flex:2.0;
border:1px solid blue;
}
»시도
브라우저 지원
현재 주류 브라우저 상자 플렉스 속성을 지원하지 않습니다.
-ms-플렉스 지원하여 Internet Explorer 10 개인 재산.
개인 재산 -moz-상자 플렉스 지원하여 파이어 폭스.
개인 재산 -webkit-상자 플렉스 지원하여 사파리와 크롬.
참고 : 인터넷 익스플로러 9 IE 이전 버전의 유연 상자를 지원하지 않습니다.
정의 및 지침을 속성
상자-flex 속성은 상자의 하위 요소는 유연한 또는 고정 크기를 지정합니다.
팁 : 상자 수축 성장 요소가가요 축소인지의 여부와 성장.상자에 여유 공간이있을 때마다,가요 성 요소의 공간을 채우도록 확장.
기본값 : | 0.0 (요소가가요 아님을 나타냄) |
---|---|
상속 : | 아니 |
버전 : | CSS3 |
자바 스크립트 구문 : | 개체 .style.boxFlex = 2.0 |
문법
상자 플렉스 :값;
값 | 기술 |
---|---|
값 | 유연성 요소입니다. 모든 Flex는 상대적이다 |