반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5 CSS3 Flexible Box Model

2012. 2. 2. 21:08 | Posted by 솔웅


반응형
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 와 관련해서 알아보겠습니다.
여기를 클릭하시면 이전에 정리해 뒀던 글도 보실 수있습니다.

** 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; 


CSS

Flexible Box Model

.box {
  display: -webkit-box;
  -webkit-box-orient: ;
}
.box .one, .box .two {
  -webkit-box-flex: 1;
}
.box .three {
  -webkit-box-flex: 3;
}
Box one
Box two
Box three
CSS

Flexible Box Model

.box {
    display: -webkit-box;
    -webkit-box-pack: ;
    -webkit-box-align: ;
  }

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.



반응형