彈性佈局的基礎講解

時間 2019-12-06

標籤彈性佈局基礎講解简体版

原文原文鏈接

彈性佈局的基礎講解

彈性佈局是由w3c在2009年提出的一種佈局方法，目前瀏覽器都已經支持彈性佈局（忽略IE6吧）。本文主要講解彈性佈局的基本語法並將其應用到實際網頁佈局中

如何應用彈性佈局，代碼以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

運行結果以下：
瀏覽器

容器的設置佈局

flex有6個屬性能夠設置：

flex-direction:row(主軸由左向右，默認) / row-reverse（主軸由右向左） / column （主軸由上向下）/ column-reverse （主軸由下向上）決定主軸的方向flex

flex-wrap:nowrap（默認，不換行） / wrap(換行) / wrap-reverse(換行，第一行在下方) 決定項目在一條軸線上排不下時的換行方式ui

flex-flow：是上面兩個屬性的簡寫模式默認值：flex-flow：row nowrap。spa

justify-content：flex-start(默認值，左對齊) / flex-end（右對齊） / center（居中） / space-between（兩端對齊，項目之間的間隔相等） /
space-around（每一個項目之間的間隔相等，因此項目之間的間隔比項目與邊框之間的價格大一倍）; 決定項目在主軸上的對齊方式。space-between/around在自適應調節間距時頗有用code

align-items：flex-start（交叉軸的起點對齊） / flex-end（交叉軸的終點對齊） / center（交叉軸的中點對齊） / baseline（項目的第一行文字的基線對齊）/stretch（默認值，若項目未設置高度或設置爲auto，項目將佔滿這整個容器的高度）。定義項目在交叉軸上的對齊方式htm

align-content：flex-start（與交叉軸的起點對齊） / flex-end（與交叉軸的終點對齊） / center（與交叉軸的中點對齊） /
space-between（與交叉軸的兩端對齊，軸線之間的間隔平均分佈） /space-around（每跟軸線兩側的間隔都相等，因此，軸線之間的間隔比軸線與邊框的間隔大一倍）
/ stretch（默認值，軸線佔滿整個交叉軸）。定義多根軸線的對齊方式，若是項目自有一根軸線，該屬性不起做用繼承

項目的屬性設置

order：定義項目的排列順序，數字越小，排列越靠前，默認爲0.圖片

flex-grow：定義項目的放大比例，默認爲0，默認狀況下即便有剩餘空間項目也不會放大。縮放的方向爲flex-direction的方向。

flex-shrink：定義項目的縮小比例，默認爲1，空間不足時，該項目會縮小。其值爲0表示不縮小.縮放的方向爲flex-direction的方向。

flex-basis：定義了在分配多餘空間以前，項目佔據的主軸空間（main size），瀏覽器根據這個屬性沒計算主軸是否有多餘空間，默認值爲 auto，即項目的原本大小。flex-basis：80px；寬度（方向爲row）設置爲80px；

flex：是上面三個屬性的簡寫，默認值爲 0 1 auto.有兩個快捷值：auto（1 1 auto）和none（0 0 auto）

align-self：該屬性容許耽擱項目與其餘項目不一樣的對齊方式，課覆蓋align-items的屬性值。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則爲stretch。

align-self：auto / flex-start / flex-end / center /baseline /stretch flex-basis:值爲0與auto（默認）時的區別：前者沒有將整個項目進行計算，然後者則是忽略內容進行算的，因此若是佈局是須要的是每一個項目的百分比配置，則應當將flex-basis設置爲0.

若是對你有幫助就收藏一下唄！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。