問題描述

在使用彈性布局的時(shí)候，必然會(huì)有碰到分配子元素空間問題，例如flex:1平均分配

但使用中有時(shí)候會(huì)發(fā)現(xiàn)，當(dāng)其中某個(gè)子元素的內(nèi)容過長(zhǎng)時(shí)，會(huì)擠壓其他子元素以及父元素的空間，并沒有按我們?cè)O(shè)置的預(yù)期比例去進(jìn)行分配

正常情況

內(nèi)容超出

html

<div class="flex">
  <div class="left">111111111</div>
  <div class="right">
      <div class="right-content">
          adasdasdasdadasdasdasdasdasadasdasdasdadasdasadasdasdasdadasdasdasdasdasadasdasdasdadasdas
      </div>
  </div>
</div>

css

.flex {
  width: 300px;
  height: 100px;
  display: flex;
}
.left {
  flex: 1;
  background-color: aqua;
}
.right {
  flex: 1;
  background-color: red;
}

可以看到，不僅沒有按照我們預(yù)期分配的空間，還超出了父元素的整體寬度，這樣子肯定是不合理的，影響了頁(yè)面布局

解決方案一（失?。?/h3>

flex:1 實(shí)際只是簡(jiǎn)寫

相當(dāng)于

flex-grow: 1; 剩余空間中增加的比例，默認(rèn)值為0，表示子元素不會(huì)增加大小，設(shè)置為1時(shí)，子元素會(huì)盡可能地填充剩余空間，如有多個(gè)子元素按比例分配剩余空間

flex-shrink: 1; 子元素在空間不足時(shí)縮小的比例。默認(rèn)值為1，表示子元素將縮小以適應(yīng)容器。當(dāng)設(shè)置為0時(shí)，表示子元素不會(huì)縮小，如果有多個(gè)子元素設(shè)置了 flex-shrink，則它們將按比例縮小

flex-basis: 0%; 子元素在分配多余空間之前所占據(jù)的空間大小。默認(rèn)值為auto，表示子元素的大小由其內(nèi)容決定。當(dāng)設(shè)置為一個(gè)長(zhǎng)度值時(shí)，表示子元素在分配多余空間之前占據(jù)的空間大小。如果有多個(gè)子元素設(shè)置了 flex-basis，則它們將按照設(shè)置的大小進(jìn)行分配

可以注意到flex-shrink這個(gè)設(shè)置縮小屬性，那么我們?cè)O(shè)置一下為0讓它不縮小不就可以了嗎

.left {
  flex: 0 0 50%; 
  background-color: aqua;
}
.right {
  flex: 0 0 50%;
  background-color: red;
}

可以看到，left左邊確實(shí)按照預(yù)期沒有被縮小，但是right還是把超出了自身寬度

解決方案二（成功）

仔細(xì)理解彈性布局發(fā)現(xiàn)，對(duì)于flex屬性的理解有一個(gè)誤區(qū)，我們?cè)诮o子元素使用flex屬性時(shí)，理所應(yīng)當(dāng)?shù)恼J(rèn)為他會(huì)按照比例分配父元素的空間大小，但實(shí)際并不是如此

仔細(xì)查看flex-grow屬性的描述不難發(fā)現(xiàn)，彈性布局的flex屬性只是分配剩余空間

剩余空間：flex 容器的大小減去所有 flex 項(xiàng)的大小加起來的大小。如果所有的兄弟項(xiàng)目都有相同的 flex-grow 系數(shù)，那么所有的項(xiàng)目將剩余空間按相同比例分配，否則將根據(jù)不同的 flex-grow 定義的比例進(jìn)行分配。

MDN鏈接

所以看到這里就不難理解了，flex屬性只是 對(duì)父元素的多余空間按什么比例去分配，并不是按我們的理解意思為固定分配的比例，不會(huì)對(duì)子元素原本實(shí)際內(nèi)容寬度進(jìn)行處理，就跟flex-basis屬性其實(shí)就是設(shè)置在分配剩余空間之前，當(dāng)前子元素的實(shí)際空間大小

那么看到這里就有點(diǎn)疑惑了，方案一中的flex-basis屬性不是使用了嗎，為啥沒有效果

flex: 0 0 50%;，禁止了子元素縮放以及分配空間，直接按照最后一個(gè)參數(shù)flex-basis屬性各自分配固定50%左邊元素left其實(shí)是成功了的，右邊right為啥就失效了呢，不是已經(jīng)設(shè)置好寬度了嗎

瀏覽器默認(rèn)為flex容器的子元素設(shè)置了 "min-width: auto;min-height: auto"，這意味著子元素的最小寬度和高度不能小于其內(nèi)容的寬度和高度。

所以才會(huì)發(fā)生上述現(xiàn)象，那么如何解決呢，我們直接把這個(gè)默認(rèn)屬性覆蓋了，設(shè)置為min-width: 0，即使其內(nèi)容為空或者寬度很小，也可以使得flex子元素在flex容器中正確地布局

解決代碼如下

.flex {
  width: 300px;
  height: 100px;
  display: flex;
}
.left {
  flex: 0 0 50%;
  background-color: aqua;
}
.right {
  flex: 0 0 50%;
  background-color: red;
  min-width: 0;
  min-height: 0;

  overflow: hidden;
  word-break: break-all;
}

如果使用flex:1;讓彈性布局分配剩余空間，那么使用width:0或者min-width: 0都可以實(shí)現(xiàn)，即把子元素空間都設(shè)置為0，由flex來分配剩余所有空間

到此這篇關(guān)于flex子元素內(nèi)容超出盒子容器寬度問題解決的文章就介紹到這了,更多相關(guān)flex子元素超出盒子容器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論