一．布局簡介

CSS3 提供一種嶄新的布局方式：Flexbox 布局，即彈性伸縮布局模型(FlexibleBox)。用來提供一個更加有效的方式實現響應式布局。但是用于這個布局方式還處于 W3C 的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發展中，可能還有各種改動，瀏覽器的兼容性還存在問題。所以，本節作為初步了解即可。

首先，我們來看下舊版本的瀏覽器兼容情況：

Flexbox 舊版本兼容情況

屬性IEFirefoxChromeOperaSafari

帶前綴	無	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;background-color: silver;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; }

轉載于:https://www.cnblogs.com/pengtdy/p/8306282.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[24]CSS3 弹性伸缩布局(上)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。