CSS3彈性盒模型

舊式的彈性盒子方法

1、在擁有盒子的盒子上加display:box; 或 

inline-box 

開啟彈性盒模型

2、box-flex 分配空間，假如容器有a份，box-flex:2，那就佔a分之2

3、分布方向  水平box-orient: horizontal;  垂直 box-orient:vertical;

4、定義顯示順序：box-ordinal-group

例項(沒作相容)

doctype html

>
<
html 
lang
="zh"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>舊彈性盒模型
title
>
<
style 
type
="text/css"
>
.content
.content div 
#box1 
#box2 
#box3 
style
>
head
>
<
body
>
<
div 
class
="content"
>
<
div 
id="box1"
>box1
div>
<
div 
id="box2"
>box2
div>
<
div 
id="box3"
>box3
div>
div>
body
>
html
>

新式的彈性盒子方法

1、在擁有盒子的盒子上加display:flex; 開啟彈性盒模型

2、flex-grow 分配空間，假如容器有a份，box-flex:2，那就佔a分之2

3、分布方向 水平flex-direction: row; 垂直 flex-direction:column;

4、定義顯示順序：order

例項(沒作相容)-與上面效果相同，只是寫法不一樣

doctype html

>
<
html 
lang
="zh"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>新彈性盒模型
title
>
<
style 
type
="text/css"
>
.content 
.content div 
#box1 
#box2 
#box3 
style
>
head
>
<
body
>
<
div 
class
="content"
>
<
div 
id="box1"
>box1
div>
<
div 
id="box2"
>box2
div>
<
div 
id="box3"
>box3
div>
div>
body
>
html
>

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。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...