flex伸縮盒子如何伸縮

有以下一段代碼，頁面上會如何呈現呢？

.flex-box {
  width: 200px;
  height: 100px;
  display: flex;
}

.box1 {
  width: 100px;
  background-color: #ccc;
}

.box2 {
  flex: 1;
  background-color: skyblue;
}

<div class="flex-box">
    <div class="box1"></div>
    <div class="box2">halgjlajlgjlajglajghahahhahahhahahaha</div>
</div>

這是經常使用的左側定寬，右側自適應的用法，瀏覽器是如何計算寬度的呢？

不少人可能會有疑問：爲何.box1設置了寬度，但仍是會被擠扁呢？

flex如何伸縮

例若有如下例子：

.flex-box {
  width: 400px;
  height: 100px;
  display: flex;
}

.box1 {
  width: 200px;
  background-color: red;
}

.box2 {
  width: 200px;
  background-color: green;
}

.box3 {
  width: 400px;
  background-color: blue;
}

<div class="flex-box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

父容器中的子元素都有一個初始寬度，初始寬度如何決定下面說明

若是按照初始寬度放入普通父容器中，那麼他們會溢出400個像素。

當父元素display: flex;默認狀況下子盒子flex-shrink:1，box一、box二、box3都具備可收縮的特性。

flex-shrink 定義的僅僅只是元素寬度變小的一個權重份量。每一個元素具體收縮多少，還有另外一個重要因素，即它自己的寬度。 展現尺寸這麼算：

總權重爲1x200 + 1x200 + 1x400 = 800;

三個元素分別收縮：

• 400 x 1(flex-shrink) x 200(width) / 800 = 100
• 400 x 1(flex-shrink) x 200(width) / 800 = 100
• 400 x 1(flex-shrink) x 400(width) / 800 = 200

box1的展現尺寸爲：box1默認寬度 - 100 = 100；

box2的展現尺寸爲：box2默認寬度 - 100 = 100；

box3的展現尺寸爲：box3默認寬度 - 200 = 200；

仍是很好理解的吧。同理，當元素不夠撐滿父元素時，須要伸展的寬度也是按照這種方式計算的。只是比例基數變成了剩餘空間的寬度。這時候須要設置子元素的flex-grow爲1，由於默認狀況下子盒子flex-grow爲0。 不一樣的是，伸展時的每一個元素的權重即爲元素的 flex-grow 的值。

若是你但願元素不能伸縮或者不能伸展，那麼須要設置相應的屬性爲0。

如: flex-shrink: 0，flex-grow: 0.

flex-basis，width，content決定初始寬度

flex-basis 用於計算上一小節中元素的「初始寬度」。

• flex-basis爲auto時, 初始寬度爲設置的寬度值或者元素內容大小（盒子模型中的佔用寬度）。
• flex-basis爲像素值時，初始寬度爲flex-basis的值。
• flex-basis爲百分比時，初始寬度爲佔父容器的比例。
• flex-basis爲0或0%時，初始寬度爲0。

常見的flex設置：

樣式	felx-grow	flex-shink	flex-basis
flex默認值	0	1	auto
flex: 1	1	1	0%
flex:auto	1	1	auto
flex: none	0	0	auto

flex-basis 屬性在任何空間分配發生以前初始化flex子元素的尺寸。

初始寬度優先級：flex-basis > width > content，最終尺寸會受到min-width和max-width的制約

如今來解答文章開頭的第一個問題，瀏覽器是如何計算的。

box1的初始尺寸是100px,box2的初始尺寸是0，那麼有100的剩餘尺寸，box1佔比0，box2佔比1，因此剩餘尺寸都分配給box2

==這些表如今子盒子內容寬度不會超出子盒子寬度的時候一切都看起來你恭我順，風平浪靜，但當某個子盒子內容寬度超出子盒子寬度時候，就要開始爭地盤了。==
以上兩節所講的是獲取剩餘空間和分配剩餘空間，但實際中一些元素並不會乖乖得服從分配，那麼就須要找出不符合分配的成員,從新計算分配空間

flex子元素如何爭地盤

在實踐中，收縮行爲會傾向於給你合理的結果。你一般不但願本身的內容徹底消失，或者文本框比本身的最小內容要小，一樣的，伸展行爲也但願儘量得將內容展現出來。

除非有明確的width相關設置，不然尺寸都不會主動超過容器寬度的，可是，存在一些特殊狀況，例如，連續的英文數字，好長好長；或者內聯元素被設置了white-space:nowrap。若是內容超出，根據展現規則，該元素就不會乖乖服從分配的空間了，他就會侵佔剩餘空間，那一定一定牽連着其餘子元素的收縮，但不管伸展仍是收縮，都會受到max-width和min-width的約束。但若是父盒子實在承受不了子盒子的內容，那麼只能真的溢出了。

所謂不符合分配的成員指的是分配後的空間 < content,當成員不符合分配時,那麼該成員的最終值就是 content,由於這個成員的超出，其餘成員就須要將超出的空間從新分配

看如下例子：

.flex-box {
  width: 300px;
  height: 100px;
  display: flex;
}

.flex-box > div {
  flex: 1 1 auto;
}

.box1 {
  width: 200px;
}

<div class="flex-box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

這裏box1初始值是200，box2和box3初始值是0，那麼剩餘空間是100，會給box1,box2,box3分別分配33，那麼box1,box2,box3分別是233,33,33

.flex-box {
  width: 300px;
  height: 100px;
  display: flex;
}

.flex-box > div {
  flex: 1 1 0%;
}

.box1 {
  width: 200px;
}

<div class="flex-box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

這裏box1,box2,box3初始值都是0，那麼剩餘空間是300，會給box1,box2,box3分別分配100，那麼box1,box2,box3分別是100，100，100

這個時候把box1的寬度去掉,給box1加個200px的內容呢<div style="width: 200px;"></div>,以上兩個例子又如何呈現呢？

.flex-box {
  width: 300px;
  height: 100px;
  display: flex;
}

.flex-box > div {
  flex: 1 1 auto;
}

<div class="flex-box">
    <div class="box1">
        <div style="width: 200px;"></div>
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

這裏box1初始值是200，box2和box3初始值是0，那麼剩餘空間是100，會給box1,box2,box3分別分配33，那麼box1,box2,box3分別是233,33,33

.flex-box {
  width: 300px;
  height: 100px;
  display: flex;
}

.flex-box > div {
  flex: 1 1 0%;
}

<div class="flex-box">
    <div class="box1">
        <div style="width: 200px;"></div>
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

這裏box1,box2和box3初始值是0，那麼剩餘空間是300，會給box1,box2,box3分別分配100,但box1的內容被撐到了200，box1要伸展，相應的box2和box2就要從新分配空間（-100px），都在容許的範圍內去伸展和壓縮，box1要伸展100px,相應的box2和box3分別壓縮50px,最終呈現的是box1,box2,box3分別是200，50，50

這個時候回頭來看開頭的例子

box1的初始值是100，box2初始值是0，box1 flex:0,box2 flex: 1,那麼剩餘空間都給了box2,box1是可縮盒子，box2是可伸可縮盒子，當box2內容超出本來的空間後就會伸展，box1會相應得收縮。

那麼如何避免這種狀況呢？

• 作法1：給box1設置最小寬度min-width
• 作法2：給box1設置flex-shink:0
• 作法3：從內容上處理，給box2設置word-break:break-all