Flexible Box Layout module

CSS3 가 발표되면서 기존의 CSS2 에는 없던 새로운 기능들이 포함되었다. CSS2와 CSS3의 가장 큰 차이점은 CSS3 가 모듈 기반으로 개발되고 있다는 점인데 이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 할 수 있게 한다.

CSS3 는 Text, Fonts, Color, Backgrounds & Borders, Transforms, Transitions, Animations 와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다. 특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여할 수 있게 되었다. CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다.

CSS3 에서 새로 추가된 기능 중에 Flexible Box Layout module(flexbox) 은 지금까지 많은 관심을 받지 못했다. 하지만 테이블을 만들어 각각의 행과 열에 배경색을 설정하거나 컬럼 안에서 3분의 2만큼 배경색을 설정하는 등 컨텐츠 영역에서 박스가 유동적으로 늘어나고 주변에 영향을 받아서 처리해야 할 때 이것을 유용하게 사용할 수 있다.

Flexbox 는 다음과 같이 만들 수 있다.

display:box

.flexbox {     display: -moz-box;     display: -webkit-box;     display: box; } [출처] css3 flexbox|작성자 꼼순이

Flexbox 에는 다음과 같은 속성이 있다.

Target	Properties	Value	Description
Children	box-orient	horizontal vertical	자식 요소들이 배치되는 방향을 지정 horizontal : 자식 요소들을 수평방향으로 배치 vertical : 자식 요소들을 수직방향으로 배치
	box-direction	normal reverse	자식 요소들이 배치되는 순서의 방향을 지정 normal : 작성된 순서대로 배치 reverse : 작성된 순서의 반대로 배치
	box-align	start end center baseline stretch	부모요소(flexbox)의 box-orient 속성의 영향을 받아 수평, 수직으로 자식요소들을 배치 start : 박스의 시작에 배치 end : 박스의 끝에 배치 center : 박스의 중간에 배치 baseline : 기준선에 배치 stretch : 늘려서 배치
	box-pack	start end center justify	부모요소(flexbox)의 box-orient 속성의 영향을 받아 수평, 수직으로 자식요소를 배치 start : 박스의 시작에 배치 end : 박스의 끝에 배치 center : 박스의 중간에 배치 justify : 박스 안 공간을 균등하게 위치시킴
Self	box-ordinal-group	[number]	부모요소(flexbox) 안에서 자식요소(flexbox)가 배치될 순서를 임의로 지정 [number] : 표시될 순서의 번호
	box-flex	[number]	Flexible Box안에서 확장여부를 결정 0 : 박스를 확장하지 않음 1 or [number] : 박스를 확장함

Flexbox의 속성들을 하나씩 살펴보면,

box-orient

자식 요소들이 배치되는 방향을 지정한다.

horizontal : 자식 요소들을 수평방향으로 배치

vertical : 자식 요소들을 수직방향으로 배치

.rule {     -moz-box-orient: vertical;     -webkit-box-orient: vertical;     box-orient: vertical; } [출처] css3 flexbox|작성자 꼼순이

    

box-direction

자식 요소들이 배치되는 순서의 방향을 지정한다.

normal : 작성된 순서대로 배치

reverse : 작성된 순서의 반대로 배치

#main {     -moz-box-direction: reverse;     -webkit-box-direction: reverse;     box-direction: reverse; }

box-align

부모요소(flexbox)의 box-orient 속성의 영향을 받아 수평, 수직으로 자식요소들을 배치한다.

start : 박스의 시작에 배치

end : 박스의 끝에 배치

center : 박스의 중간에 배치

baseline : 기준선에 배치

stretch : 늘려서 배치

#main {     -moz-box-align: stretch;     -webkit-box-align: stretch;     box-align: stretch; } #box-1 {     -moz-box-align: start;     -webkit-box-align: start;     box-align: start; } #box-2 {     -moz-box-align: center;     -webkit-box-align: center;     box-align: center; } #box-3 {     -moz-box-align: end;     -webkit-box-align: end;     box-align: end; } [출처] css3 flexbox|작성자 꼼순이

box-pack

부모요소(flexbox)의 box-orient 속성의 영향을 받아 수평, 수직으로 자식요소를 배치한다.

start : 박스의 시작에 배치

end : 박스의 끝에 배치

center : 박스의 중간에 배치

justify : 박스 안 공간을 균등하게 위치시킴

#main {     -moz-box-pack: justify;     -webkit-box-pack: justify;     box-pack: justify; } #box-1 {     -moz-box-pack: center;     -webkit-box-pack: center;     box-pack: center; } #box-2 {     -moz-box-pack: start;     -webkit-box-pack: start;     box-pack: start; } #box-3 {     -moz-box-pack: end;     -webkit-box-pack: end;     box-pack: end; } [출처] css3 flexbox|작성자 꼼순이

box-ordinal-group

부모요소(flexbox) 안에서 자식요소(flexbox)가 배치될 순서를 임의로 지정

[number] : 표시될 순서의 번호

#box-2 {     -moz-box-ordinal-group: 1;     -webkit-box-ordinal-group: 1;     box-ordinal-group: 1; } [출처] css3 flexbox|작성자 꼼순이

box-flex

Flexible Box 안에서 확장여부를 결정한다.

0 : 박스를 확장하지 않음

1 : 박스를 확장함

.rule {     -moz-box-flex: 1;     -webkit-box-flex: 1;     box-flex: 1; } [출처] css3 flexbox|작성자 꼼순이

1 이상의 수를 입력하면 수에 비례하여 확장된다.

#box-1 {     box-flex: 1; } #box-2 {     box-flex: 2; } #box-3 {     box-flex: 7; } [출처] css3 flexbox|작성자 꼼순이

[출처] css3 flexbox|작성자 꼼순