css3 彈性佈局和多列布局

2022-08-05 12:51:24 字數 1678 閱讀 9702

彈性盒子(flexible box)是css3中盒子模型的彈性佈局,在傳統的佈局方式上增加了很多靈活性。

在父盒子上定義display屬性:

#box
當然還有行內佈局的彈性盒子

#box
注意,設為flex佈局以後,子元素的float、clear和vertical-align屬性將失效。彈性盒子兩個軸如圖:

在研究具體屬性前,先建立一個基本模板,必要時修改一下部分引數:

12

345#flex-box

.flex-item

排列方向設定

#flex-box
換行設定

.box
flex-direction和flex-wrap的縮寫屬性

.box
水平方向上對齊

.box 

/* value flex-start 左對齊(預設)*/

/* value flex-end:右對齊*/

/* value center: 居中*/

/* value space-between:兩端對齊,專案之間的間隔都相等*/

/* value space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍*/

垂直方向上對齊

.box 

/* value flex-start 交叉軸的起點對齊*/

/* value flex-end 交叉軸的終點對齊*/

/* value center 交叉軸的中點對齊*/

/* value baseline 專案的第一行文字的基線對齊*/

/* value stretch 如果專案未設定高度或設為auto,將佔滿整個容器的高度(預設)*/

多根軸線的對齊方式

.box 

/* value flex-start 與交叉軸的起點對齊*/

/* value flex-end 與交叉軸的終點對齊*/

/* value center 與交叉軸的中點對齊*/

/* value space-between 與交叉軸兩端對齊,軸線之間的間隔平均分佈*/

/* value space-around 每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍*/

/* value stretch 軸線佔滿整個交叉軸(預設值)*/

11

1111

1111

11222

222 333

3 444

66 8

4 12

i am header!

i am body!

i am footer!

css3 多列布局記

多列布局屬性 columns column widht和column count的縮寫。 column width 定義每列列寬度。 col...

CSS 多列布局 三列布局

下面的 演示了3列布局的用法。 html head title 三列布局 styletype text css body column1of3 column2of3 column3of3 body h1style color 706fd3 軟體開發,成就夢想 h2 ahref 學程式設計,上利永貞網 d...

CSS多列布局

css新增了多列布局特性,可以讓瀏覽器確定何時結束一列和開始下一列,無需任何額外的標記。簡單來說,就是css3多列布局可以自動將內容按指定的...