# 第 29 章 CSS3 彈性伸縮布局[上]
學習要點:
1.布局簡介
2.舊版本
主講教師:李炎恢
本章主要探討 HTML5?中 CSS3?提供的用來實現未來響應式彈性伸縮布局方案,這里做一個初步的了解。
**一.布局簡介**
CSS3 提供一種嶄新的布局方式:Flexbox 布局,即彈性伸縮布局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式布局。但是用于這個布局方式還處于 W3C?的草案階段,并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發展中,可能還有各種改動,瀏覽器的兼容性還存在問題。所以,本節課作為初步了解即可。
首先,我們來看下舊版本的瀏覽器兼容情況:
Flexbox 舊版本兼容情況
| **屬性** | **IE** | **Firefox** | **Chrome** | **Opera** | **Safari** |
| --- | --- |
| 帶前綴 | 無 | 4 ~ 25 | 4 ~ 31 | 15 ~ 18 | 5.17+ |
| 不帶前綴 | 無 | 無 | 無 | 無 | 無 |
以上的數據,我們摘自 CSS3?手冊上的。當然,不同的教材和文章的會略有不同。但誤差率也就一到兩個版本,影響不大。
首先,第一步:先創建一段內容,分成三個區域。
//HTML 部分?
```
<div>
<p> 第一段內容... </p>
<p> 第二段內容... </p>
<p> 第三段內容... </p>
</div>
```
//CSS 部分?
```
p { width: 150px; border: 1px solid gray; margin: 5px; padding: 5px;
} div { display: -moz-box; display: -webkit-box; display: box;
}
```
通過以上設置,在除了 IE?瀏覽器外,布局實現了水平分布。那么下面,我們就重點研究一下這些屬性的含義。
**二.舊版本**
如果屬性和屬性值為:display:box,那么就是 2009?年 7?月份設定的工作草案,屬于舊版本。它面向的是一些早期瀏覽器的彈性布局方案。
首先,我們要將幾個需要布局模塊的父元素設置一下容器屬性 display。
| **屬性值** | **說明** |
| --- | --- |
| box | 將容器盒模型作為塊級彈性伸縮盒顯示(舊版本) |
| inline-box | 將容器盒模型作為內聯級彈性伸縮盒顯示(舊版本) |
我們知道塊級它是占用整行的,類似<div>元素;而內聯級不占用整行,類似<span>元素。但是我們設置了整個盒子,他們都不占用,保持一致。
//設置彈性,以火狐為例
```
div { display: -moz-box;
}
```
**1.box-orient** **屬性**
box-orient 主要實現盒子內部元素的流動方向。
//設置垂直流動
```
div { -webkit-box-orient: vertical;
}
```
| **屬性值** | **說明** |
| --- | --- |
| horizontal | 伸縮項目從左到右水平排列 |
| vertical | 伸縮項目從上到下垂直排列 |
| inline-axis | 伸縮項目沿著內聯軸排列顯示 |
| block-axis | 伸縮項目沿著塊軸排練顯示 |
**2.box-direction**
box-direction 屬性主要是設置伸縮容器中的流動順序。
//設置逆序
```
div { -moz-box-direction: reverse;
}?
```
| **屬性值** | **說明** |
| --- | --- |
| normal? | 默認值,正常順序 |
| reverse? | 逆序 |
**3.box-pack**
box-pack 屬性用于伸縮項目的分布方式。
//分布方式已結束位置靠齊
```
div { -moz-box-pack: end;
}?
```
| **屬性值** | **說明** |
| --- | --- |
| start | 伸縮項目以起始點靠齊 |
| end | 伸縮項目以結束點靠齊 |
| center | 伸縮項目以中心點靠齊 |
| justify | 伸縮項目平局分布,-webkit-支持,-moz-不支持 |
**4.box-align**
box-align 屬性用來處理伸縮容器的額外空間。//居中對齊,清理上下額外空間
```
div { -moz-box-align: center;
}
```
| **屬性值** | **說明** |
| --- | --- |
| start | 伸縮項目以頂部為基準,清理下部額外空間 |
| end | 伸縮項目以底部為基準,清理上部額外空間 |
| center | 伸縮項目以中部為基準,平均清理上下部額外空間 |
| baseline | 伸縮項目以基線為基準,清理額外的空間 |
| stretch | 伸縮項目填充整個容器,默認 |
**5.box-flex**
box-flex 屬性可以使用浮點數分配伸縮項目的比例//設置每個伸縮項目占用的比例
```
p:nth-child(1) { -moz-box-flex: 1;
} p:nth-child(2) { -moz-box-flex: 2.5;
} p:nth-child(3) { -moz-box-flex: 1;
}
```
**6.box-ordinal-group**
box-ordinal-group 屬性可以設置伸縮項目的顯示位置。
//將第一個位置的元素,跳轉到第三個位置
```
p:nth-child(1) { -moz-box-ordinal-group: 3;
}
```
- 介紹
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超鏈接和路徑
- 第 5 章 分組元素
- 第 6 章 表格元素
- 第 7 章 文檔元素
- 第 8 章 嵌入元素
- 第 9 章 音頻和視頻
- 第 10 章 表單元素[上]
- 第 10 章 表單元素[中]
- 第 10 章 表單元素[下]
- 第 11 章 全局屬性和其他
- 第 12 章 CSS 入門
- 第 13 章 CSS 選擇器[上]
- 第 14 章 CSS 顏色與度量單位
- 第 15 章 CSS 文本樣式[上]
- 第 15 章 CSS 文本樣式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 邊框與背景[上]
- 第 17 章 CSS 邊框與背景[下]
- 第 18 章 CSS 表格與列表
- 第 19 章 CSS 其他樣式
- 第 20 章 CSS3 前綴和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 邊框圖片效果
- 第 24 章 CSS3 變形效果[下]
- 第 25 章 CSS3 過渡效果
- 第 26 章 CSS3 動畫效果
- 第 27 章 CSS 傳統布局[上]
- 第 27 章 CSS 傳統布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 彈性伸縮布局[上]
- 第 29 章 CSS3 彈性伸縮布局[中]
- 第 29 章 CSS3 彈性伸縮布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介紹
- 第 2 章 排版樣式
- 第 3 章 表格和按鈕
- 第 4 章 表單和圖片
- 第 5 章 柵格系統
- 第 6 章 輔組類和響應式工具
- 第 7 章 圖標菜單按鈕組件
- 第 8 章 輸入框和導航組件
- 第 9 章 路徑分頁標簽和徽章組件
- 第 10 章 巨幕頁頭縮略圖和警告框組件
- 第 11 章 進度條媒體對象和 Well 組件
- 第 12 章 列表組面板和嵌入組件
- 第 13 章 模態框插件
- 第 14 章 下拉菜單和滾動監聽插件
- 第 15 章 標簽頁和工具提示插件
- 第 16 章 彈出框和警告框插件
- 第 17 章 按鈕和折疊插件
- 第 18 章 輪播插件
- 第 19 章 附加導航插件
- 第 20 章 項目實戰--響應式導航[1]
- 第 20 章 項目實戰--響應式輪播圖[2]
- 第 20 章 項目實戰--首頁內容介紹[上][3]
- 第 20 章 項目實戰--首頁內容介紹[下][4]
- 第 20 章 項目實戰--資訊內容[5,6]
- 第 20 章 項目實戰--案例和關于[7]
- javaScript 教程
- javascript快速入門1--JavaScript前世今生,HelloWorld與開發環境
- javascript快速入門2--變量,小學生數學與簡單的交互
- javascript快速入門3--分支判斷與循環
- javascript快速入門4--函數與內置對象
- javascript快速入門5--數組與對象
- javascript快速入門6--Script標簽與訪問HTML頁面
- javascript快速入門7--ECMAScript語法基礎
- javascript快速入門8--值,類型與類型轉換
- javascript快速入門9--引用類型
- javascript快速入門10--運算符,語句
- javascript快速入門11--正則表達式
- javascript快速入門12--函數式與面向對象
- javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model)
- javascript快速入門14--DOM基礎
- javascript快速入門15--節點
- javascript快速入門15--表單
- javascript快速入門16--表格
- javascript快速入門17--事件
- javascript快速入門18--樣式
- javascript快速入門19--定位
- javascript快速入門20--Cookie
- javascript快速入門21--DOM總結
- javascript快速入門22--Ajax簡介
- javascript快速入門23--XHR—XMLHttpRequest對象
- javascript快速入門24--XML基礎
- javascript快速入門25--瀏覽器中的XML
- javascript快速入門26--XPath
- javascript快速入門27--XSLT基礎
- PHP 教程
- 第一章 如何加載運行已發布的PHP項目
- 第二章 PHP基礎
- 第三章 操作符與控制結構
- 第四章 數學運算
- 第五章 數組
- 第六章 目錄與文件
- 第七章 自定義函數
- 第八章 字符串處理
- 第九章 正則表達式
- 第十章 日期與時間
- 第十一章 表單與驗證
- 第十二章 會話控制
- 第十三章 上傳文件
- 第十四章 處理圖像
- 第十五章 MySQL 數據庫
- 第十六章 PHP 操作MySQL
- 第十七章 面向對象基礎
- 第十八章 面向對象的特性
- 第十九章 面向對象的工具