本篇文章給大家分享的是有關(guān)如何使用CSS3 的彈性盒子display屬性中flex與box屬性，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

目前創(chuàng)新互聯(lián)建站已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、欒城網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

一：什么是彈性盒子
   CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類(lèi)型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｒ霃椥院胁季帜Ｐ偷哪康氖翘峁┮环N更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間?？梢杂煤?jiǎn)單的方式滿足很多常見(jiàn)的復(fù)雜的布局需求。它的優(yōu)勢(shì)在于開(kāi)發(fā)人員只是聲明布局應(yīng)該具有的行為，而不需要給出具體的實(shí)現(xiàn)方式。瀏覽器會(huì)負(fù)責(zé)完成實(shí)際的布局。該布局模型在主流瀏覽器中都得到了支持。

二：CSS3 彈性盒子內(nèi)容
   彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
   彈性容器通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
   彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
 注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。

三：display:box 與 display:flex的區(qū)別和用法

1. display:box  主要是控制父容器里面子元素的排列方式、排列順序、垂直（水平）對(duì)齊方式

display:box是2009年之前的語(yǔ)法，已經(jīng)過(guò)時(shí)，使用是需要加上對(duì)應(yīng)前綴的。

所以兼容性的代碼，大致如下

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

舉個(gè)例子：

	
		
		
		
	
	
		

			
123
			
123
			
123
		
	

效果圖：

給父元素聲明一個(gè)display:box伸縮盒屬性后，就代表是把整個(gè)盒子里的塊元素都變成了內(nèi)聯(lián)元素，然后這個(gè)父元素里面的子元素就可以自由分配空間了，而不會(huì)每個(gè)塊元素各占一行，而是協(xié)商共同排在一行上面。如上面例子中div里面的3個(gè)p標(biāo)簽會(huì)在一行展示，而不是上下層級(jí)分配。

二：display:flex  主要讓子容器針對(duì)父容器的寬度按一定規(guī)則進(jìn)行劃分

display:flex;是2011年之后出現(xiàn)的，也將是以后標(biāo)準(zhǔn)的語(yǔ)法，大部分新版瀏覽器基本都不用使用前綴了，目前應(yīng)該只有蘋(píng)果瀏覽器需要帶webkit前綴，其他都可以正常顯示。

新版本設(shè)置伸縮盒的display屬性如下：
   display:flex;將容器盒模型作為塊級(jí)彈性伸縮盒顯示(新版本)
   display:inline-flex;將容器盒模型作為內(nèi)聯(lián)級(jí)彈性伸縮盒顯示(新版本)

用法：

首先f(wàn)lex的使用需要有一個(gè)父容器，父容器中有幾個(gè)items.

父容器：container

屬性：

display:flex;/*flex塊級(jí)，inline-flex:行內(nèi)快*/

justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/

align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space-around*/

flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/

flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時(shí)候，從上到下）、nowrap(當(dāng)容器不夠?qū)挼臅r(shí)候，子元素會(huì)平分父容器的寬或者高)、wrap-reverse:從下向上*/

/*flex-flow是flex-direction、flex-wrap的縮寫(xiě)*/

舉個(gè)例子：

 
  
  
  
 
 
     

　　　　   
這是中間的box1
        　
這是中間的box2
　　　
 

效果圖：

注意，設(shè)為Flex布局以后，子元素的 float 、 clear 和 vertical-align 屬性將失效。

以上就是如何使用CSS3 的彈性盒子display屬性中flex與box屬性，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。