Layout linh động (flexible) HTML5 & CSS3

LINK DEMO

Ở bài trước, mình đã trình bày cách tạo một trang layout bằng HTML5 & CSS3.

Chắc hẳn các bạn cũng đã nhận thấy được sự đơn giản và linh động trong phiên bản mới ra sao. Có được sự linh động đó phải kể đến thuộc tính box của CSS3, với bài này, mình sẽ trình bày rõ hơn về thuộc tính này.

Giờ hãy xem các thuộc tính box giúp ta làm được gì nhé:

Canh chỉnh nội dung trong thẻ.

• box-align : Điều chỉnh theo chiều dọc.
• box-pack : Điều chỉnh theo chiều ngang.

Các giá trị: start|end|center|baseline(sát biên)|stretch(cho phép phần tử con lấp đầy không gian của nó)

/* Firefox */ 
display:-moz-box; 
-moz-box-align:center; 

/* Safari and Chrome */ 
display:-webkit-box; 
-webkit-box-align:center; 

/* W3C */ 
display:box; 
box-align:center;  

Chỉnh chiều, phương hướng của nội dung trong thẻ . Ta dùng thuộc tính:

box-direction

Các giá trị: normal|reverse(đảo chiều)|inherit(thừa kế)

/* Firefox */ 
display:-moz-box; 
-moz-box-direction:reverse; 

/* Safari and Chrome */ 
display:-webkit-box; 
-webkit-box-direction:reverse; 

/* W3C */ 
display:box; 
box-direction:reverse; 

Linh động trong kích thước . Ta dùng thuộc tính:

box-flex

Giá trị: value (nếu thẻ có flex value=2 thì kích thước nó sẽ gấp 2 lần thẻ có flex value=1) ;

-moz-box-flex:1; /* Firefox */ 
-webkit-box-flex:1; /* Safari and Chrome */ 
box-flex:1;  

Sắp xếp các thẻ theo thứ tự quy định . Ta dùng thuộc tính:

box-ordinal-group

Giá trị: số nguyên (các thẻ sẽ sắp xếp theo giá trị này)

.ord1 
{ 
margin:5px; 
-moz-box-ordinal-group:1; /* Firefox */ 
-webkit-box-ordinal-group:1; /* Safari and Chrome */ 
box-ordinal-group:1; 
} 
.ord2 
{ 
margin:5px; 
-moz-box-ordinal-group:2; /* Firefox */ 
-webkit-box-ordinal-group:2; /* Safari and Chrome */ 
box-ordinal-group:2; 
}  

Sắp xếp các thẻ nội dung theo trục (dọc hoặc ngang) . Ta dùng thuộc tính:

box-orient-group

Giá trị: horizontal (ngang)|vertical (dọc)|inline-axis|block-axis|inherit(thừa kế)

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;

/* W3C */
display:box;
box-orient:horizontal;  

Theo khoapham.vn