一．布局簡(jiǎn)介

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

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

Flexbox 舊版本兼容情況

屬性IEFirefoxChromeOperaSafari

帶前綴	無(wú)	4~ 25	4 ~ 31	15 ~18	5.17+
不帶前綴	無(wú)	無(wú)	無(wú)	無(wú)	無(wú)

以上的數(shù)據(jù)，我們摘自 CSS3 手冊(cè)上的。當(dāng)然，不同的教材和文章的會(huì)略有不同。但誤差率也就一到兩個(gè)版本，影響不大。
首先，第一步：先創(chuàng)建一段內(nèi)容，分成三個(gè)區(qū)域。

//HTML 部分 <div><p>第一段內(nèi)容...</p><p>第二段內(nèi)容...</p><p>第三段內(nèi)容...</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; }

通過(guò)以上設(shè)置，在除了 IE 瀏覽器外，布局實(shí)現(xiàn)了水平分布。那么下面，我們就重點(diǎn)研究一下這些屬性的含義。

二．舊版本

如果屬性和屬性值為：display:box，那么就是 2009 年 7 月份設(shè)定的工作草案，屬于舊版本。它面向的是一些早期瀏覽器的彈性布局方案。

首先，我們要將幾個(gè)需要布局模塊的父元素設(shè)置一下容器屬性 display。

屬性值說(shuō)明

box	將容器盒模型作為塊級(jí)彈性伸縮盒顯示（舊版本）
inline-box	將容器盒模型作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示（舊版本）

我們知道塊級(jí)它是占用整行的，類(lèi)似<div>元素；而內(nèi)聯(lián)級(jí)不占用整行，類(lèi)似<span>元素。但是我們?cè)O(shè)置了整個(gè)盒子，他們都不占用，保持一致。

//設(shè)置彈性，以火狐為例 div {display: -moz-box; }

1.box-orient 屬性

box-orient 主要實(shí)現(xiàn)盒子內(nèi)部元素的流動(dòng)方向。

//設(shè)置垂直流動(dòng) div {-webkit-box-orient: vertical; } 屬性值說(shuō)明

horizontal	伸縮項(xiàng)目從左到右水平排列
vertical	伸縮項(xiàng)目從上到下垂直排列
inline-axis	伸縮項(xiàng)目沿著內(nèi)聯(lián)軸排列顯示
block-axis	伸縮項(xiàng)目沿著塊軸排練顯示

2.box-direction

box-direction 屬性主要是設(shè)置伸縮容器中的流動(dòng)順序。

//設(shè)置逆序 div {-moz-box-direction: reverse; } 屬性值說(shuō)明

normal	默認(rèn)值，正常順序
reverse	逆序

3.box-pack

box-pack 屬性用于伸縮項(xiàng)目的分布方式。

//分布方式已結(jié)束位置靠齊 div {-moz-box-pack: end; } 屬性值說(shuō)明

start	伸縮項(xiàng)目以起始點(diǎn)靠齊
end	伸縮項(xiàng)目以結(jié)束點(diǎn)靠齊
center	伸縮項(xiàng)目以中心點(diǎn)靠齊
justify	伸縮項(xiàng)目平局分布，-webkit-支持，-moz-不支持

4.box-align

box-align 屬性用來(lái)處理伸縮容器的額外空間。

//居中對(duì)齊，清理上下額外空間 div {-moz-box-align: center; } 屬性值說(shuō)明

start	伸縮項(xiàng)目以頂部為基準(zhǔn)，清理下部額外空間
end	伸縮項(xiàng)目以底部為基準(zhǔn)，清理上部額外空間
center	伸縮項(xiàng)目以中部為基準(zhǔn)，平均清理上下部額外空間
baseline	伸縮項(xiàng)目以基線為基準(zhǔn)，清理額外的空間
stretch	伸縮項(xiàng)目填充整個(gè)容器，默認(rèn)

5.box-flex

box-flex 屬性可以使用浮點(diǎn)數(shù)分配伸縮項(xiàng)目的比例

//設(shè)置每個(gè)伸縮項(xiàng)目占用的比例 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 屬性可以設(shè)置伸縮項(xiàng)目的顯示位置。

//將第一個(gè)位置的元素，跳轉(zhuǎn)到第三個(gè)位置 p:nth-child(1) {-moz-box-ordinal-group: 3; }

轉(zhuǎn)載于:https://www.cnblogs.com/pengtdy/p/8306282.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。