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

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

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)專業(yè)提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站設(shè)計、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

1. flex 家族

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

.container {
  display: flex;
}

.container > .left {
  flex: 1;
}

.container > .right {
  flex: 1;
}

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

我們來看一個引起問題的例子：

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

但實際的效果：

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

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

2. flex-basis 從中作梗

flex: auto 實際上是三個屬性的集合：

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

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

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

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

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

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

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

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

flex-basis 元素：

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

普通元素：

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

3. 解決方式

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

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

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

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

那么第二種呢？

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

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

翻譯成人話就是：

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

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

那么來計算一下：

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

由計算可得：

max(0, 272) = 272

min(272, 98) = 98

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

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

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

本文題目：如何在CSS中解決flex-basis文本溢出問題
分享路徑：http://jinyejixie.com/article30/ijcdso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、微信小程序、做網(wǎng)站、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站策劃

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

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

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

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