溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何在CSS中解決flex-basis文本溢出問題

發(fā)布時(shí)間：2022-04-28 15:50:59 來源：億速云 閱讀：369 作者：iii 欄目：大數(shù)據(jù)

本篇內(nèi)容主要講解“如何在CSS中解決flex-basis文本溢出問題”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何在CSS中解決flex-basis文本溢出問題”吧!

1. flex 家族

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

.container {
  display: flex;
}

.container > .left {
  flex: 1;
}

.container > .right {
  flex: 1;
}

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        padding: 5px;
        border: 1px solid #ccc;
      }

      .no-effect {
        align-items: center;
        margin: 100px;
        width: 200px;
        color: #999;
      }

      .no-effect > div:first-of-type {
        margin-right: 10px;
      }

      p {
        color: red;
      }

      .no-wrap {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div style="display: flex;" class="no-effect">
      <div style="flex: 0 0 80px">我比較短</div>
      <div style="flex: auto">
        <p class="no-wrap">我很長，不是開玩笑的，可以長到?jīng)]邊</p>
      </div>
    </div>
  </body>
</html>

我們想要的效果：

如何在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. 解決方式

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

  • 首先自然是設(shè)置 width 屬性即可了，只要 width 小于剩余空間即可，一般設(shè)置為 width: 0; 這樣可百分之百確定小于剩余空間；

  • 不設(shè)置 width 但用 min-width 來限制也是一樣的，既然 flex 項(xiàng) 的 min-width:auto ，那我們也設(shè)置一個(gè)小于剩余空間的值，一般也是 min-width: 0;

  • 設(shè)置 overflow:hidden 來限制溢出效果也是一致的。

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

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

那么第二種呢？

第二種的情況比較復(fù)雜，當(dāng)我們設(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文本溢出問題 

到此，相信大家對“如何在CSS中解決flex-basis文本溢出問題”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手