今天在做項目的時候遇到一個關于布局的問題, 就是 flex: 1; 我一直以為 flex: 1; 代表的是 flex: aoto; 后來發現結果并不是這樣, 所以寫一篇博客來講解一下 flex: 1; 代表什么

代碼第一版

<div class="container"><div class="div">我是一個div</div><div class="div">我是一個很多字div</div><div class="div">我是一個更多字而且第三個div</div> </div> <style> .container{display: flex; } .div{border: 1px solid red;flex: 1; }</style>

利用 flex: 1; 確實實現了三個不同內容的 div 平分空間, 所以按我以前的想法來說:

flex: 1; === flex: 1 1 auto;

這是完整寫法, 詳見mdn, 它還有另外兩種完整寫法, 分別是 initial (0 1 auto) 和 none (0 0 auto)

• 第一個參數表示: flex-grow 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
• 第二個參數表示: flex-shrink 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小
• 第三個參數表示: flex-basis 給上面兩個屬性分配多余空間之前, 計算項目是否有多余空間, 默認值為 auto, 即項目本身的大小

代碼第二版

上面證實了我以前的想法, flex:1; 就是代表均勻分配元素, 但是我們來改成完整寫法看看

/* 其他代碼沒有變化, 沿用上面的 */.div{border: 1px solid red;flex: 1 1 auto; }

加入原來以為正確的完整代碼后可以看到三個元素沒有均分, 所以可以推出:

flex: 1; !== flex: 1 1 auto;

走到這我就一頭霧水, 為什么和我以前想的完全不同, 于是我就去參照了 w3c 對于 flex 的解釋, 官方明確指, flex 最后一個參數為 0, 見下圖

所以:

• flex: 1; === flex: 1 1 0;

但是在 chrome 瀏覽器上設置 flex: 1 1 0; 時, 它會自動加一個單位 px

而設置 flex: 1; 時, 它會自動加一個 %, 看來他們解析到瀏覽器的時候必須帶一個單位

于是我就又做了幾個實驗, 改了一下 flex-basis 的參數, 得出以下結論

• flex: 1; === flex: 1 1 任意數字+任意長度單位;

可以看出最重要的一點在 第三個參數 flex-basis 上, 我們再來回顧以下 這個屬性的作用

flex-basis給上面兩個屬性分配多余空間之前, 計算項目是否有多余空間, 默認值為 auto, 即項目本身的大小

auto 為表示項目本身的大小, 如果設置為 auto, 那么這三個盒子就會按照自己內容的多少來等比例的放大和縮小, 所以出現了上圖中三個盒子不一樣大的情況

那我們如果隨便設置一個其他帶有長度單位的數字呢, 那么他就不會按項目本身來計算, 所以它不關心內容, 只是把空間等比收縮和放大

現在你知道 flex: 1; 為什么能平分元素了吧, CSS 是一門很難學的語言, 雖然我經過不斷試驗得出結果, 但是它還有好多莫名其妙的問題去等你發現. 比如 margin: auto 為什么會實現居中, overflow: hidden 為何能實現 BFC

你可以遵從官方標準, 也可以和我一樣去實驗性的看待 flex: 1;

不過我建議你別深究這些問題, 因為所見即所得, 它這樣能實現效果就可以了, CSS 學習是沒必要刨根問底的, 會用就是最好的證明, 以上僅為個人見解, 如有疑問請給我留言或私信

總結

以上是生活随笔為你收集整理的什么时候会是用treeset?_flex:1 到底代表什么?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。