技術標籤：htmlcsscss3flex

最基礎的彈性盒子的應用

記錄一下彈性盒子最最最最最基礎的應用

官方概念（搬運）

說明

複合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。
如果縮寫「flex: 1」, 則其計算值為「1 1 0%」
如果縮寫「flex: auto」, 則其計算值為「1 1 auto」
如果「flex: none」, 則其計算值為「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值

取值

none： none關鍵字的計算值為: 0 0 auto
<’ flex-grow ‘>： 用來指定擴充套件比率，即剩餘空間是正值時此「flex子項」相對於「flex容器」裡其他「flex子項」能分配到空間比例。在「flex」屬性中該值如果被省略則預設為「1」

簡單用法

彈性盒子的無腦流用法
即在父框加上display：flex；表示這個盒子變成了一個彈性盒子，其子內容為彈性項，用flex：0 0 0；啟動，這三個0是三個值，等下會細說，最最無腦的是後兩個都寫成0，第一個寫比例，有手就行。

<div class="dad">
        <div class="son1">崽1</div>
        <div class="son2">崽2</div>
    </div>

.dad {
            width:
 
 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        
        .son1 {
            flex: 1 0 0;
            background-color: red;
            color: white;
        }
        
        .son2 {
            flex: 1 0 0;
            background-color: blue;
            color: white;
        }

可以看到兩個崽子flex的取值後兩個為0後，第一個都為1，就是老父親的家產兩個崽子一人一半。

自己的想法

關於父框變成彈性盒子後，子元素的變化：最明顯的就是子元素的寬度變成了由內容決定，而高度則撐滿了父框。

還是上面的程式碼，但是我兩個崽子的flex：1 0 0；屬性註釋掉了以後，在橫向上，兩個崽子就只能自己有多少貨，才能分到多少東西，但是在縱深上，兩個崽子卻一下到底，全都佔滿。大概就是，老父親把自己的遺產以技術分成了多份，只要小崽子懂得一內內皮毛就可以得到這部分技術的全部財產，但是老父親不會的技術，你會了也沒用，應為老父親沒有。而且一項技術的財產只能由一個人領。
以及display：flex；的兩個預設屬性，。

第一個為橫向排列，第二個為不換行。
關於取值flex拋開none不談，flex是有三個引數的。我們一個一個來。
第一個引數：
flex-grow ：就是字面意思，用來指定剩餘空間的擴充套件比例。注意，只是擴充套件比例，擴充套件，意思就是，當你的初始寬度沒有講父框佔滿的時候，父框還剩下了的空間，講按照這個比例來分配。0就是我都不要，都是你們的，演算法是 各自的值 / 值的總和，就是各自所佔剩餘空間的比例。不會的話，建議給小學數學老師打電話，說對不起（無霧）。
第二個引數：
flex-shrink：這個引數就有點麻煩了，並不是他的概念麻煩，而是演算法麻煩，這個引數的含義是收縮超出的空間，意思就是你的初始值超出了父框的範圍，收縮回來，就是小崽子們所學的東西已經超過了老父親，但是老父親並不認，還要把你拉回來，打的你忘掉。炸一看概念似乎和第一個值並沒有什麼不同，只是最後多了一句不明所以的話，但是壞就壞在最後一句話上：在收縮的時候收縮比率會以伸縮基準值加權在「flex」屬性中。這句話我也沒想好怎麼結束，就是直接舉（抄）個栗子，說說怎麼算吧。
比如，子元素有三個：flex屬性分別為：
flex：1 1 300px；
flex：2 2 200px；
flex：3 3 400px；
而父框的寬度是800px，所以，子元素的的初始值（不知道哪個的先看第三個引數），共900px；超出了老父親100px；所以老父親就要吧他們拉回來，但是老父親是個技術人士，他是這麼拉的：
崽1：(300*1/1900)100 約等於16px
崽2：(2002/1900)100約等於21px
崽3：(4003/1900)*100約等於63px
三個崽格拉回來這麼多，emmmm，怎麼說那，nb，沒話說。
第三個引數：
flex-basis：這個簡單的多了，就是你給各個子元素設定的初始值，意思是在發生彈性關係之前，小崽子們已經有的東西。而根據初始值的總和與父框寬度的大小，決定試用第一個引數還是第二個引數，如果父框大於總和，則根據第一個引數的之進行擴充套件，反之，就根據第二個引數的值進行收縮。
px：也可以講第一個和第二個引數設定為0，只給出初始值，就可以對某個子元素進行定寬處理。還有一件事，如果子項啟動了flex： 那麼，width屬性就不起作用了，初始值也不會看他，他就已經廢了。

寫在最後的話

雖然很可能這篇部落格的訪問量都是我一個人創造的，但是姑且還是說一下，如果你看到了了這篇部落格，並且看到了這裡，並且和我一樣也是一個正在學習前端的萌新的話，在實際應用這些東西之前，請按照自己的理解實驗一下效果，實際看看這些東西到底是什麼，如果我有什麼寫的不對的，也歡迎回來噴我，放開噴，沒事，但是要帶著乾貨。結束。

還有一件事

關於彈性盒子，應該還會更新，時間的話，要看我的學習進度，emmmm，恩，會更的。