彈性盒模型----容器屬性

　　佈局的傳統方案，基於盒裝模型，依賴display屬性+position屬性+float屬性。他對於那些特殊的佈局很是不方便，好比，垂直居中就不容易實現。
　　2009年，W3C提出了一種新的方案—-Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。
　　採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。
　　今天我來分享一下我對彈性盒模型的看法和經驗，若有不足之處歡迎留言指正。
　　在網上看過這一些關於彈性盒子模型的知識，我相信百度過這方面知識點的人都見過下面的這一幅圖片，第一次看就一臉懵逼，若是先了解實驗以後再來看下面這一幅圖就清楚了，今天我就扯開主軸，交叉軸啥這些的不談，後面寫了一些發現仍是要看一下主軸和交叉軸，，，， 簡單的來能夠先認爲主軸就是橫軸，交叉軸就是豎着的縱軸，下面看就直接來代碼和效果，但願你看到事後進行實驗，我相信你會對彈性盒子的知識會有很大的瞭解而且可以應用彈性盒子來進行佈局。

　　

 

1、初始的代碼和樣式以下，接下來咱們添加代碼和修改代碼來查看樣式的區別。

        

  

   

　　彈性盒子嘛，首要的條件仍是要說一下容器和項目，對於咱們這個而言容器就是代碼中的 ul ， 項目爲 li。好了接下來開始添加代碼看看神奇的樣式。
　　對於彈性盒子而言首要條件就是給容器添加上 display:flex;  

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

1、 flex-direction: 決定主軸方向。
　　1. flex-direction:row;（主軸方向：橫排/行 從左到右排列）
　　　將這個屬性添加到容器ul當中，會發現樣式以下，竟然能夠橫排顯示。

　　

　　　說到彈性咱們來試驗一下這個效果，將外面的容器的寬度減少一些

　　

　　　咱們先減少到這樣，若是寬度繼續小的話，會發現他會不同，就算把寬度縮小以後他也不會換行，而且在縮小以後他的寬度會維持在它裏面內容的寬度。

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

　　　　

　　　　

 

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

　　　　

 

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

　　　　

 

2、flex-wrap: 該屬性控制flex是單行仍是多行(注意：這裏的我把寬度都給調整小了，改成了300px)
　　1.flex-wrap:nowrap;(默認值，不換行)
　　　　　　就像最開始咱們實驗的那樣，就算把他的寬度設置成那麼小他都不會換行
　　2.flex-wrap:wrap; （換行）以下圖

　　

 

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

　　

3、flex-flow;　　flex-direction和flex-wrap的複合簡寫形式，默認爲 row nowrap;

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

　　

　　就寫一種組合屬性吧其餘的樣式本身去試一試。
4、justify-content 定義了項目在主軸上的排列方式
　　注意：下面的實驗我加上了flex-wrap:wrap; 換行屬性（容易辨別）
　　1.justify-content:flex-start; （左對齊）

　　

 

　　2.justify-content:flex-end;（右對齊）

　　

 

　　3.justify-content:center;（居中對齊）

　　

 

　　4.justify-content:space-between;（兩端對齊，項目之間間隔相等）

　　這裏我把寬度變小了一些，看到下面這幅圖是否是感受只用這個屬性就能夠很容易的實現佈局了呢。

　　

 

　　5 .justify-content:space-around;（每一個項目兩側間隔相等）

　　

 

5、align-item 規定了彈性盒子在交叉軸如何對齊
　　這一次把第一個和第二個高度調整大一些是這個樣子,下圖的默認值，規定不換行了

　　1.align-items:stretch;（默認值）

 　　

 

　　2.align-items:flex-end;（交叉軸的終點對齊）

　　

 

　　3. align-items:center;（與交叉軸中點對齊）

　　

 

　　4. align-items:baseline;（項目的第一行文字的基線對齊）
　　這裏的文字的大小調整一下，第一個文字改成40px,

　　

 

　　5. align-items:flex-start;（交叉軸的起點對齊）

　　

　　6、align-content：
　　定義了多根軸線的對齊方式，若是項目只有一根軸線，則不起做用。
　　這裏我給調整了一個容器屬性的高度爲300px; 換行顯示
　　一、align-content: stretch（默認值，軸線佔滿整個交叉軸）

　　

　　二、align-content: flex-star（與交叉軸起點對齊）

　　

　　三、align-content: flex-end（與交叉軸終點對齊）

　　

　　四、align-content: center（與交叉軸中點對齊）

　　

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

　　

　　六、align-content: space-around（交叉軸兩側間隔相等）

　　

　　在這裏先介紹這麼多，下一次就分享一下彈性盒子項目的一些屬性，若是有不清楚的地方或者文章有不足之處，但願各位能夠指正，若是你看到個人文章能夠收穫了一些知識，那麼我會很是高興的。