WEB_APP/HTML5
HTML5 CSS3 Flexible Box Model
솔웅
2012. 2. 2. 21:08
반응형
Let's study for webkit-box of CSS3.
You can change orientation of boxes below. just select 'horizontal' or 'vertical' of webkit-box-orient in select menu . And you can change align of the boxes also.
오늘은 CSS3의 Flexible Box 와 관련해서 알아보겠습니다.
여기를 클릭하시면 이전에 정리해 뒀던 글도 보실 수있습니다.
Google Chrome 16.0.912.75 m - Working well (O)
Internet Explorer 9.0.8.112 - Not working (X)
Opera 11.60 - Not working (X)
Safari 5.1.2 - Working well (O)
FireFox 9.0.1 - Working well (O) except -webkit-box-pack
이 기능은 익스플로어랑 오페라에서는 안 되네요.
그리고 fireFox에서는 webkit-box-pack 기능이 안 되구요.
You can download source code file below.
You can change orientation of boxes below. just select 'horizontal' or 'vertical' of webkit-box-orient in select menu . And you can change align of the boxes also.
오늘은 CSS3의 Flexible Box 와 관련해서 알아보겠습니다.
여기를 클릭하시면 이전에 정리해 뒀던 글도 보실 수있습니다.
** display:-webkit-inline-box; // block가 아닌 inline box
** -webkit-box-orient : 정렬 ( box ) , 기본은 horizontal
block-axis Elements are oriented along the box's axis.
horizontal Elements are oriented horizontally.
inline-axis Elements are oriented along the inline axis.
vertical Elements are oriented vertically.
** -webkit-box-flex사용
display:-webkit-box가 적용된 하위 노드들에
box-flex를 이용해서 크기 설정가능. ( 비율 )
** -webkit-box-pack 사용 : 가로 정렬 처리.
start|end|center|justify;
** -webkit-box-align 사용 : 세로 정렬 처리.
start|end|center|justify; Google Chrome 16.0.912.75 m - Working well (O)
Internet Explorer 9.0.8.112 - Not working (X)
Opera 11.60 - Not working (X)
Safari 5.1.2 - Working well (O)
FireFox 9.0.1 - Working well (O) except -webkit-box-pack
이 기능은 익스플로어랑 오페라에서는 안 되네요.
그리고 fireFox에서는 webkit-box-pack 기능이 안 되구요.
You can download source code file below.
반응형