問題描述

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

但使用中有時候會發(fā)現，當其中某個子元素的內容過長時，會擠壓其他子元素以及父元素的空間，并沒有按我們設置的預期比例去進行分配

正常情況

內容超出

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;
}

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

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

flex:1 實際只是簡寫

相當于

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

flex-shrink: 1; 子元素在空間不足時縮小的比例。默認值為1，表示子元素將縮小以適應容器。當設置為0時，表示子元素不會縮小，如果有多個子元素設置了 flex-shrink，則它們將按比例縮小

flex-basis: 0%; 子元素在分配多余空間之前所占據的空間大小。默認值為auto，表示子元素的大小由其內容決定。當設置為一個長度值時，表示子元素在分配多余空間之前占據的空間大小。如果有多個子元素設置了 flex-basis，則它們將按照設置的大小進行分配

可以注意到flex-shrink這個設置縮小屬性，那么我們設置一下為0讓它不縮小不就可以了嗎

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

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

解決方案二（成功）

仔細理解彈性布局發(fā)現，對于flex屬性的理解有一個誤區(qū)，我們在給子元素使用flex屬性時，理所應當的認為他會按照比例分配父元素的空間大小，但實際并不是如此

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

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

MDN鏈接

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

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

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

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

所以才會發(fā)生上述現象，那么如何解決呢，我們直接把這個默認屬性覆蓋了，設置為min-width: 0，即使其內容為空或者寬度很小，也可以使得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都可以實現，即把子元素空間都設置為0，由flex來分配剩余所有空間

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