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

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

成都創(chuàng)新互聯(lián)是專業(yè)的富拉爾基網(wǎng)站建設(shè)公司，富拉爾基接單;提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行富拉爾基網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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 文本溢出問題

為什么會出現(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 自動鋪滿剩余寬度也就是 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 來自動計(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 會讓元素填滿剩余空間，所以就會鋪滿，由于 P 元素有不換行顯示省略號，會正常顯示。

那么第二種呢？

第二種的情況比較復(fù)雜，當(dāng)我們設(shè)置了 min-width 不為 auto 的值后，這里會用到 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)我們手動設(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è)資訊頻道，感謝各位的閱讀！

新聞名稱：怎么在CSS中解決flex-basis文本溢出問題
轉(zhuǎn)載來于：http://jinyejixie.com/article40/pggdho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、ChatGPT、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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