真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司

重慶分公司

028-86922220

怎么在CSS中解決flex-basis文本溢出問題-創(chuàng)新互聯(lián)

怎么在CSS中解決flex-basis 文本溢出問題？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括彭州網(wǎng)站建設(shè)、彭州網(wǎng)站制作、彭州網(wǎng)頁制作以及彭州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，彭州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到彭州省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

1. flex 家族

flex 里有很多的屬性，我們經(jīng)常用到的就是如下操作：

.container {
  display: flex;
}

.container > .left {
  flex: 1;
}

.container > .right {
  flex: 1;
}

這樣可以很方便的實(shí)現(xiàn)一個(gè)左右等分的布局。

我們來看一個(gè)引起問題的例子：



  
    
    
    
    Document
    
  
  
    
      我比較短

我很長(zhǎng)，不是開玩笑的，可以長(zhǎng)到?jīng)]邊

我們想要的效果：

怎么在CSS中解決flex-basis 文本溢出問題

但實(shí)際的效果：

怎么在CSS中解決flex-basis 文本溢出問題

為什么會(huì)出現(xiàn)這個(gè)情況？

2. flex-basis 從中作梗

flex: auto 實(shí)際上是三個(gè)屬性的集合：

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

flex-grow 表示放大比例，flex-shrink 表示收縮比例，flex-basis 表示分配多余空間前，項(xiàng)目占據(jù)的主軸空間。

我們左邊 div 不放大，不縮小，固定 80px 寬度；右邊 div 自動(dòng)鋪滿剩余寬度也就是 200px - 80px = 120px，實(shí)際效果卻遠(yuǎn)遠(yuǎn)超出了 120px，這是因?yàn)?flex-basis 為 auto 時(shí)的計(jì)算導(dǎo)致的。

我們來看看 flex-basis: auto 的歷史：

最初的時(shí)候 flex-basis 是由 width/height 決定的；
后來有個(gè)bug 1032922 ，flex-basis 的計(jì)算就變成了沿主軸的寬度決定了；
后來又出現(xiàn)了一個(gè) bug 1093316 ，又變回了由 width/height 決定且出現(xiàn)了一個(gè)新的概念content 來自動(dòng)計(jì)算寬/高；

所以當(dāng)我們沒有給flex-basis 元素設(shè)置width 時(shí)，flex-basis: auto 由內(nèi)部的content 決定寬度，且受max/min-width 限制。

如此一來，在內(nèi)部content 自由的情況下，那么flex-basis 元素的寬度就看max/min-width 了。

max-width 的默認(rèn)值是none ，而min-width 的默認(rèn)值一般是0 ，而此處卻是auto ，這也是出現(xiàn)“異常”的原因了。

flex-basis 元素：

怎么在CSS中解決flex-basis 文本溢出問題

普通元素：

怎么在CSS中解決flex-basis 文本溢出問題

3. 解決方式

知道原因后，那我們就可以對(duì)癥下藥了。

首先自然是設(shè)置width 屬性即可了，只要width 小于剩余空間即可，一般設(shè)置為width: 0; 這樣可百分之百確定小于剩余空間；
不設(shè)置width 但用min-width 來限制也是一樣的，既然 flex 項(xiàng) 的min-width:auto ，那我們也設(shè)置一個(gè)小于剩余空間的值，一般也是min-width: 0;
設(shè)置overflow:hidden 來限制溢出效果也是一致的。

介紹了三種解決方式，再來聊聊前兩種為什么可以解決的原因吧。

第一種很簡(jiǎn)單，width 設(shè)置為 0，但是flex-basis 會(huì)讓元素填滿剩余空間，所以就會(huì)鋪滿，由于 P 元素有不換行顯示省略號(hào)，會(huì)正常顯示。

那么第二種呢？

第二種的情況比較復(fù)雜，當(dāng)我們?cè)O(shè)置了min-width 不為 auto 的值后，這里會(huì)用到 shrink-to-fit 算法，這個(gè)算法的計(jì)算機(jī)制如下：

min(max(preferred minimum width, available width), preferred width)

翻譯成人話就是：

preferred minimum width：最小寬度
available width：可用寬度，也就是content box的寬度
preferred width：選寬度，除了明確換行外的不換行時(shí)的寬度

shrink-to-fit 的寬度 = min ( max (最小寬度, 可用寬度) , 選寬度)

那么來計(jì)算一下：

最小寬度：0
可用寬度：272px
選寬度：200 - 一些七七八八的值剩余部分(98px)

由計(jì)算可得：

max(0, 272) = 272

min(272, 98) = 98

所以最終寬度是剩余部分 98px，當(dāng)我們手動(dòng)設(shè)置min-width: 110px 時(shí)就可以看到超過溢出去了。

怎么在CSS中解決flex-basis 文本溢出問題

看完上述內(nèi)容，你們掌握怎么在CSS中解決flex-basis 文本溢出問題的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁標(biāo)題：怎么在CSS中解決flex-basis文本溢出問題-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/dcsjhe.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部