CSS3 盒模型設計

一、彈性盒模型

a)        注意在使用彈性盒模型的時候父元素必須要加display:box 或 display:inline-box 例：

b)        box-orient 定義盒模型的布局方向

i.             horizontal 水平顯示

ii.             vertical 垂直方向 例：

doctype

html>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

.box

.box

div

style

>

head

>

<

body

>

<

divclass

="box"

>

<

div>1

div>

<

div>2

div>

<

div>3

div>

<

div>4

div>

<

div>5

div>

div>

body

>

html

>

c)        box-direction 元素排列順序

i.             normal 正序

ii.             reverse 反序 例：

12345

d)        box-ordinal-group 設定元素的具體位置 例：

1234

5 e)        box-flex 定義盒子的彈性空間

i.             子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和 例：

12345

f)        box-pack 對盒子富裕的空間進行管理

i.             start 所有子元素在盒子左側顯示，富裕空間在右側

ii.             end 所有子元素在盒子右側顯示，富裕空間在左側

iii.             center 所有子元素居中

iv.             justify 富餘空間在子元素之間平均分布 例：

12345

g)        box-align 在垂直方向上對元素的位置進行管理

i.             star 所有子元素在據頂

ii.             end 所有子元素在據底

iii.             center 所有子元素居中 例：

1234

5

css3 彈性盒模型

1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...

CSS3彈性盒模型

一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...

Css3彈性盒模型

css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...