CSS3彈性伸縮布局-創(chuàng)新互聯(lián)

CSS3 提供一種嶄新的布局方式：Flexbox 布局，即彈性伸縮布局模型(Flexible Box)。用來提供一個更加有效的方式實現(xiàn)響應(yīng)式布局。但是用于這個布局方式還處于 W3C 的草案階段，并且它還分為舊版本、新版本以及混合過渡版本三種不同的編碼方式。在發(fā)展中，可能還有各種改動，瀏覽器的兼容性還存在問題。
首先，我們來看下舊版本的瀏覽器兼容情況：

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

創(chuàng)新互聯(lián)公司專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機(jī)房位于中國電信/網(wǎng)通/移動機(jī)房，中國電信云錦天府服務(wù)有保障！

//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;
}

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

舊版本
如果屬性和屬性值為：display:box，那么就是 2009 年 7 月份設(shè)定的工作草案，屬于舊版本。它面向的是一些早期瀏覽器的彈性布局方案。
首先，我們要將幾個需要布局模塊的父元素設(shè)置一下容器屬性 display。

我們知道塊級它是占用整行的，類似<div>元素；而內(nèi)聯(lián)級不占用整行，類似<span> 元素。但是我們設(shè)置了整個盒子，他們都不占用，保持一致。
//設(shè)置彈性，以火狐為例div {
display: -moz-box;
}

1.box-orient 屬性
box-orient 主要實現(xiàn)盒子內(nèi)部元素的流動方向。
//設(shè)置垂直流動div {
-webkit-box-orient: vertical;
}

2.box-direction
box-direction 屬性主要是設(shè)置伸縮容器中的流動順序。
//設(shè)置逆序
div {
-moz-box-direction: reverse;
}

3.box-pack
box-pack 屬性用于伸縮項目的分布方式。
//分布方式已結(jié)束位置靠齊div {
-moz-box-pack: end;
}

4.box-align
box-align 屬性用來處理伸縮容器的額外空間。
//居中對齊，清理上下額外空間div {
-moz-box-align: center;
}

5.box-flex
box-flex 屬性可以使用浮點數(shù)分配伸縮項目的比例
//設(shè)置每個伸縮項目占用的比例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è)置伸縮項目的顯示位置。
//將第一個位置的元素，跳轉(zhuǎn)到第三個位置p:nth-child(1) {
-moz-box-ordinal-group: 3;
}

混合過渡版
混合版本的 Flexbox 模型是 2011 年提出的工作草案，主要是針對 IE10 瀏覽器實現(xiàn)的伸縮布局效果，其功能和舊版本的屬性大同小異。我們還是采用上一節(jié)課的文件，然后使用 混合過渡代碼，實現(xiàn) IE10 的伸縮布局。
首先，設(shè)置伸縮盒的 display 有如下兩個屬性值：

//需要 IE 前綴-ms- div {
display: -ms-flexbox;
}

1.flex-direction
flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設(shè)置伸縮項目的排列方
式。
//設(shè)置從上往下排列div {
-ms-flex-direction: column;
}

2.flex-wrap
flex-wrap 屬性類似與舊版本中的 box-lines，但是 box-lines 我們沒有講解，原因是沒有瀏覽器支持它。
//設(shè)置無法容納時，自動換行div {
-ms-flex-wrap: wrap;
}

3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
-ms-flex-flow: row wrap;
}

4.flex-pack
flex-pack 屬性和舊版本中的 box-pack 一樣，設(shè)置伸縮項目的對其方式。
//按照中心點對齊div {
-ms-flex-pack: center;
}

5.flex-align
flex-align 屬性和舊版本中的 box-align 一樣，處理伸縮項目容器的額外空間。
//處理額外空間div {
-ms-flex-align: center;
}

6.flex
flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。
//設(shè)置比例分配p:nth-child(1) {
-ms-flex: 1;
}
p:nth-child(2) {
-ms-flex: 3;
}
p:nth-child(3) {
-ms-flex: 1;
}

7.flex-order
flex-order 屬性和 box-ordinal-group 屬性一樣控制伸縮項目出現(xiàn)的順序。
//設(shè)置伸縮項目順序p:nth-child(1) {
-ms-flex-order: 2;
}
p:nth-child(2) {
-ms-flex-order: 3;
}
p:nth-child(3) {
-ms-flex-order: 1;
}

新版本
新版本的 Flexbox 模型是 2012 年 9 月提出的工作草案，這個草案是由 W3C 推出的最新語法。這個版本立志于指定標(biāo)準(zhǔn)，讓新式的瀏覽器全面兼容，在未來瀏覽器的更新?lián)Q代中 實現(xiàn)了統(tǒng)一。
首先，設(shè)置伸縮盒的 display 有如下兩個屬性值：


3.flex-flow
flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。
//簡寫形式div {
flex-flow: row wrap;
}

4.justify-content
justify-content 屬性和舊版本中的 box-pack 一樣，設(shè)置伸縮項目的對其方式。
//按照中心點對齊div {
justify-content: space-around;
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：CSS3彈性伸縮布局-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://bm7419.com/article28/ggdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管、微信公眾號、微信小程序、商城網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)