Flex 佈局

時間 2019-12-10

標籤 flex 佈局欄目 Flex 简体版

原文原文鏈接

(一）什麼是Flex 佈局css

　　Flex 是Flexible Box 的縮寫，是一維的彈性佈局。ide

　　採用Flex佈局的元素，稱爲Flex容器。佈局

　　它的全部子元素自動成爲容器成員，稱爲 Flex item（Flex 項目）。flex

　　既然是容器，就須要一個容器元素，將項目包裹在其中。spa

　　所以，在使用時，須要將容器元素設定爲 display：Flex。code

 .box{
            display: flex;
            flex-direction:  column;
            justify-content: space-between;
            align-items: center;
        }

（二）Flex佈局的優點blog

　　　一、能夠輕鬆的實現水平、垂直居中。it

　　　二、更容易操做內聯元素，減小適用position，float屬性，實現兩端對齊，元素均勻排列等。io

　　　三、減小布局的複雜性。event

（三）Flex 基本概念

　　1.主軸與縱軸

　　　　主軸與橫軸始終相互垂直。

　　　　水平方向是主軸仍是橫軸，由屬性 flex-direction 決定。

　　　　默認主軸是水平方向。

　　2.main start,main end

　　　　主軸起點與終點。

　　3.cross start,cross end

　　　　橫軸起點與終點。

（四）容器屬性

　　 1.flex-direction

　　　　指定了內部元素如何在flex容器中佈局，定義了主軸的方向（正方向或反方向）。

flex-direction: row; /* default value*/
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;
/* Like <column>, but reversed */
flex-direction: column-reverse;

　　　　
　　2.flex-warp

　　　　指定flex元素單行顯示仍是多行顯示。若是容許換行，能夠控制行的堆疊方向。

flex-wrap: nowrap; /* Default value 元素被擺放到一行，可能會致使容器溢出*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

　　3.flex-flow

　　　　flex-diretion || flex-wrap 的簡寫形式。

　　4.justify-content

　　　　定義的是主軸方向 flex項目如何分佈。

　　　　這裏其實有一個概念 —— 空間分配。

　　　　由於元素項的最終寬度受當前行剩餘空間影響，就會像是有彈性同樣會膨脹或收縮。

　　　　主軸方向的多餘空間是由於容器寬度 > 元素寬度之和。

justify-content: center;     /* 居中排列 */
justify-content: start;      /* 左對齊 */
justify-content: end;        /* 右對齊*/
justify-content: flex-start; /* flex items 左對齊,若是子元素是 display:flex,此屬性纔會右效果*/
justify-content: flex-end;   /* Pack flex 右對齊*/
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Distributed alignment */
justify-content: space-between; /* 除了第一個和最一個Flex項目的二者間間距相同（兩端對齊）*/
justify-content: space-around;  /* 均勻排列每一個元素，每一個元素之間間隔相等*/

　space-around 能夠實現項與項之間的均勻分佈。

　在不處理:first-child或:last-child的狀況下，space-between實現列表項的均勻分佈；

　　5.align-items

　　　　定義的是一個行內，Flex 項目在交叉軸上如何分佈。

　　　　屬性與 justify-content 一致。

　　6.align-content

　　　定義的是行與行之間，交叉軸方向的Flex項目如何分佈。

　　　　所以此屬性只適用於多行的flex容器，讓容器中全部元素居中，單行的則沒有效果。　

　　這裏所說的行，指的是在一個Flex容器內，因爲 flex-wrap:wrap 形成的換行，而不是第1個Flex容器與第2個Flex容器。

　　　　以下：當父容器寬度爲100px,兩個子容器寬度爲30px時，此時會顯示一行，設置 align-content:center, 並未垂直居中。　

<style type="text/css">
    #testDiv{
        width: 100px;
        height: 60px;
        display: flex;
        border: 1px solid #db2fff;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: center;
    }

    #One,#Two{
        width: 30px;
        height: 20px;
        border: 1px solid #4fff21;
    }
</style>
<div id="testDiv">
    <div id="One"></div>
    <div id="Two"></div>
</div>

View Code

　　　當子容器爲60px,會變成多行軸線，居中有效，效果圖以下

　　當子容器寬度爲30px，使用 align-items:center，效果圖以下

　　當子容器寬度爲60px，使用 align-items:center，效果圖以下

（四）項目屬性

　　1.flex-basis

　　　　指定了在主軸方向上的初始大小（若是不使用box-sizing改變盒模型），即寬度或者高度。

　　　　比width的優先級要高，同時設置二者，flex-basis會覆蓋width。

　　2.flex-grow

　　　　mdn：定義了彈性盒子項的拉伸因子。

　　　　即若是父容器定義了display:flex，子容器即可以根據定義的flex-grow瓜分剩餘空間。　

　　　　若是P是父容器，A，B，C是子容器，則剩餘空間=P.width-A.with-B.width-C.width。

　　　　若是A flex-grow:1, B flex-grow:2, C flex-grow:3,則表示剩餘空間被分紅了6份。

<style type="text/css">
    .container2{
        display: flex;
        width:600px;
    }
    .container2>div:nth-child(1){
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 100px;
        flex-basis: 200px;
        background: #f00;
    }
    .container2>div:nth-child(2){
        flex-grow: 1;
        background: #ff8eaa;
    }

    .container2>div:nth-child(3){
        flex-grow: 2;
        background: #4669ff;
    }
</style>

<div class="container2">
    <div>flex-basis: 200px</div>
    <div>flex-grow:1</div>
    <div>flex-grow:2</div>
</div>