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