關於彈性佈局的一些簡單應用

彈性佈局是現在一種簡單方便的佈局方式，它是肯定節省大家許多花費在佈局上的時間，現在在網上已經有不少大神都發報了關於彈性佈局的看法及使用，許多方面都值得借鑑，本人現在寫這文章除了想跟大家分享以外，還想借此讓自己加深印象，畢竟快趕上魚的記憶了，不容易啊，直接上圖!

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .box div{
            width: 100px;
            height: 100px;
            background: orange;
            border: 1px solid;
        }

    </style>

先生成一個大容器，然後裏面放8個小div塊。

接下來我們將大容器裏面的方塊橫排，這需要用到display屬性。

display: flex;

我們可以看下如下的樣式，方塊實現了橫排，但是大家可能發現裏面的方塊大小發生了改變，因爲8個div的寬度已經超過大容器的寬度了，而且display:flex屬性默認是不換行的，這裏我們就需要用到換行屬性來改變它。

 /*換行*/
            flex-wrap: wrap;
            /*不換行*/
            /*flex-wrap: nowrap;*/
            /*靠底部換行*/
            /*flex-wrap: wrap-reverse;*/

如代碼所示，默認不換行nowrap,換行wrap,以及靠底部換行wrap-reverse


對於容器的佈局需要引入阮大神提到的一個知識點，容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

接下來我們就先延水平主軸方向來實現佈局，要用到justify-content屬性來實現對齊方式

/*兩端對齊，項目之間的間隔都相等。*/
            justify-content:space-between;
            /*居中*/
            /*justify-content: center;*/
            /*每個項目兩側的間隔相等*/
            /*justify-content: space-around;*/
            /*左對齊*/
            /*justify-content: flex-start;*/
            /*右對齊*/
            /*justify-content:flex-end ;*/

如下圖就是水平方向兩端對齊，項目之間的間隔都相等，其他圖片就不一一展示了

接下來我們看下如何在交叉軸上如何對齊。

 		/*交叉軸的中點對齊。*/
            align-items: center;
            /*交叉軸的終點對齊。*/
            /*align-items:flex-end;*/
            /*交叉軸起點對齊*/
            /*align-items: flex-start;*/
            /*項目的第一行文字的基線對齊*/
            /*align-items: baseline;*/
            /*如果項目未設置高度或設爲auto，將佔滿整個容器的高度*/
            /*align-items: stretch;*/

如下圖就是交叉軸中點對齊

然後在看下flex-direction屬性，主要是改變主軸方向的屬性。

 /*水平向左方向*/
            /*flex-direction: row;*/
            /*水平向右方向*/
            /*flex-direction: row-reverse;*/
            /*垂直向下方向*/
            /*flex-direction: column;*/
            /*垂直向上方向*/
            flex-direction: column-reverse;

下面就是改變主軸方向變成垂直向上方向的樣子。

再看align-content屬性是定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

/*與交叉軸起點對齊*/
            /*align-content: flex-start;*/
            /*與交叉軸終點對齊*/
            /*align-content: flex-end;*/
            /*與交叉軸中點對齊*/
            /*align-content: center;*/
            /*與交叉軸兩端對齊*/
            align-content: space-between;
            /*每根軸線兩側的間隔都相等*/
            /*align-content: space-around;*/
            /*默認值軸線佔滿整個交叉軸*/
            /*align-content: stretch;*/

下圖就是與交叉軸兩端對齊的的屬性樣式。

以上就是寫了幾個常用到的彈性佈局屬性，如果將這幾個屬性靈活的組合運用，那麼在頁面佈局上就可以事半功倍。