css彈性盒模型中容器屬性的示例分析

小編給大家分享一下css彈性盒模型中容器屬性的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司公司2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元井岡山做網(wǎng)站,已為上家服務(wù),為井岡山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

布局的傳統(tǒng)方案，基于盒裝模型，依賴display屬性+position屬性+float屬性。他對(duì)于那些特殊的布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。

一、初始的代碼和樣式如下，接下來我們添加代碼和修改代碼來查看樣式的區(qū)別。

　　彈性盒子嘛，首要的條件還是要說一下容器和項(xiàng)目，對(duì)于我們這個(gè)而言容器就是代碼中的 ul ， 項(xiàng)目為 li。好了接下來開始添加代碼看看神奇的樣式。
對(duì)于彈性盒子而言首要條件就是給容器添加上  display:flex;

下面的這些屬性都是容器屬性，都添加到ul上面。

一、 flex-direction: 決定主軸方向。
1. flex-direction:row;（主軸方向：橫排/行 從左到右排列）
　將這個(gè)屬性添加到容器ul當(dāng)中，會(huì)發(fā)現(xiàn)樣式如下，居然可以橫排顯示。

說到彈性我們來試驗(yàn)一下這個(gè)效果，將外面的容器的寬度減小一些

我們先減小到這樣，如果寬度繼續(xù)小的話，會(huì)發(fā)現(xiàn)他會(huì)不一樣，就算把寬度縮小之后他也不會(huì)換行，并且在縮小之后他的寬度會(huì)維持在它里面內(nèi)容的寬度。

2.flex-direction:row-reverse;（主軸 從右到左排列）

3.flex-direction:column;（主軸為垂直方向 從上到下排列）

4.flex-direction:column-reverse;(主軸為垂直方向  從下往上排列)

二、flex-wrap: 該屬性控制flex是單行還是多行(注意：這里的我把寬度都給調(diào)整小了，改為了300px)
1.flex-wrap:nowrap;(默認(rèn)值，不換行)
　　　　就像最開始我們實(shí)驗(yàn)的那樣，就算把他的寬度設(shè)置成那么小他都不會(huì)換行
2.flex-wrap:wrap;  （換行）如下圖

3.flex-wrap:wrap-reverse; (反轉(zhuǎn)，通俗的說就是把第一行和最后一行換位置，第二行和倒數(shù)第二行換位置，依次類推)

三、flex-flow;　　flex-direction和flex-wrap的復(fù)合簡(jiǎn)寫形式，默認(rèn)為 row nowrap;

1. flex-flow:row-reverse wrap;(從右向左排列，換行)

就寫一種組合屬性吧其他的樣式自己去試一試。
四、justify-content 定義了項(xiàng)目在主軸上的排列方式
注意：下面的實(shí)驗(yàn)我加上了flex-wrap:wrap; 換行屬性（容易辨別）
1.justify-content:flex-start; （左對(duì)齊）

2.justify-content:flex-end;（右對(duì)齊）

3.justify-content:center;（居中對(duì)齊）

4.justify-content:space-between;（兩端對(duì)齊，項(xiàng)目之間間隔相等）

這里我把寬度變小了一些，看到下面這幅圖是不是感覺只用這個(gè)屬性就可以很容易的實(shí)現(xiàn)布局了呢。

5 .justify-content:space-around;（每個(gè)項(xiàng)目?jī)蓚?cè)間隔相等）

五、align-item 規(guī)定了彈性盒子在交叉軸如何對(duì)齊
這一次把第一個(gè)和第二個(gè)高度調(diào)整大一些是這個(gè)樣子,下圖的默認(rèn)值，規(guī)定不換行了

1.align-items:stretch;（默認(rèn)值）

2.align-items:flex-end;（交叉軸的終點(diǎn)對(duì)齊）

3. align-items:center;（與交叉軸中點(diǎn)對(duì)齊）

4. align-items:baseline;（項(xiàng)目的第一行文字的基線對(duì)齊）
這里的文字的大小調(diào)整一下，第一個(gè)文字改為40px,

5. align-items:flex-start;（交叉軸的起點(diǎn)對(duì)齊）

六、align-content：
定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，則不起作用。
這里我給調(diào)整了一個(gè)容器屬性的高度為300px; 換行顯示
1、align-content: stretch（默認(rèn)值，軸線占滿整個(gè)交叉軸）

2、align-content:  flex-star（與交叉軸起點(diǎn)對(duì)齊）

3、align-content: flex-end（與交叉軸終點(diǎn)對(duì)齊）

4、align-content: center（與交叉軸中點(diǎn)對(duì)齊）

5、align-content: space-between（與交叉軸兩端對(duì)齊，之間平均分配）

6、align-content: space-around（交叉軸兩側(cè)間隔相等）

以上是“css彈性盒模型中容器屬性的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：css彈性盒模型中容器屬性的示例分析
當(dāng)前網(wǎng)址：http://muchs.cn/article26/gdsgjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、小程序開發(fā)、網(wǎng)站排名、網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

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