今天在做項(xiàng)目的時(shí)候遇到一個(gè)關(guān)于布局的問(wèn)題, 就是 flex: 1; 我一直以為 flex: 1; 代表的是 flex: aoto; 后來(lái)發(fā)現(xiàn)結(jié)果并不是這樣, 所以寫一篇博客來(lái)講解一下 flex: 1; 代表什么

代碼第一版

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

利用 flex: 1; 確實(shí)實(shí)現(xiàn)了三個(gè)不同內(nèi)容的 div 平分空間, 所以按我以前的想法來(lái)說(shuō):

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

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

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

代碼第二版

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

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

加入原來(lái)以為正確的完整代碼后可以看到三個(gè)元素沒(méi)有均分, 所以可以推出:

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

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

所以:

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

但是在 chrome 瀏覽器上設(shè)置 flex: 1 1 0; 時(shí), 它會(huì)自動(dòng)加一個(gè)單位 px

而設(shè)置 flex: 1; 時(shí), 它會(huì)自動(dòng)加一個(gè) %, 看來(lái)他們解析到瀏覽器的時(shí)候必須帶一個(gè)單位

于是我就又做了幾個(gè)實(shí)驗(yàn), 改了一下 flex-basis 的參數(shù), 得出以下結(jié)論

• flex: 1; === flex: 1 1 任意數(shù)字+任意長(zhǎng)度單位;

可以看出最重要的一點(diǎn)在 第三個(gè)參數(shù) flex-basis 上, 我們?cè)賮?lái)回顧以下 這個(gè)屬性的作用

flex-basis給上面兩個(gè)屬性分配多余空間之前, 計(jì)算項(xiàng)目是否有多余空間, 默認(rèn)值為 auto, 即項(xiàng)目本身的大小

auto 為表示項(xiàng)目本身的大小, 如果設(shè)置為 auto, 那么這三個(gè)盒子就會(huì)按照自己內(nèi)容的多少來(lái)等比例的放大和縮小, 所以出現(xiàn)了上圖中三個(gè)盒子不一樣大的情況

那我們?nèi)绻S便設(shè)置一個(gè)其他帶有長(zhǎng)度單位的數(shù)字呢, 那么他就不會(huì)按項(xiàng)目本身來(lái)計(jì)算, 所以它不關(guān)心內(nèi)容, 只是把空間等比收縮和放大

現(xiàn)在你知道 flex: 1; 為什么能平分元素了吧, CSS 是一門很難學(xué)的語(yǔ)言, 雖然我經(jīng)過(guò)不斷試驗(yàn)得出結(jié)果, 但是它還有好多莫名其妙的問(wèn)題去等你發(fā)現(xiàn). 比如 margin: auto 為什么會(huì)實(shí)現(xiàn)居中, overflow: hidden 為何能實(shí)現(xiàn) BFC

你可以遵從官方標(biāo)準(zhǔn), 也可以和我一樣去實(shí)驗(yàn)性的看待 flex: 1;

不過(guò)我建議你別深究這些問(wèn)題, 因?yàn)樗?jiàn)即所得, 它這樣能實(shí)現(xiàn)效果就可以了, CSS 學(xué)習(xí)是沒(méi)必要刨根問(wèn)底的, 會(huì)用就是最好的證明, 以上僅為個(gè)人見(jiàn)解, 如有疑問(wèn)請(qǐng)給我留言或私信

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。