Flex弹性布局（一）——三个参数

    Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

    先说非常非常基础的东西，在使用Flex布局时要先定义该盒子为Flex布局，有两种表现方式：

第一种（直接在div上设置样式）

<div style="display:flex;margin: auto;width:400px;height:6rem;border: 0.1rem solid black">
        <div style="flex: 3 0 200px;background: rgb(211, 118, 209)">我是aa</div>
        <div style="flex: 2 0 100px;background: rgb(13, 189, 89)">我是bb</div>
</div>

第二种（不在div上设置样式，而是将样式提出单独整理在style中）

<template>内容

<div class="container">
      <div class="aa">我是aa</div>
      <div class="bb">我是bb</div>
  </div>

<style>内容

.container{
display:flex; /* 表示这个盒子使用Flex弹性布局 */
margin: auto; /* 表示使这个盒子在页面上垂直居中*/
width: 400px;
height: 6rem;
border: 0.1rem solid black;
}
.aa{
flex: 3 0 200px;
background: rgb(211, 118, 209);
}
.bb{
flex: 2 0 100px;
background: rgb(13, 189, 89);
}

效果图如下：

Flex的三个属性值

其实flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后面的两个属性可以省略不写。在需要同时使用这3个属性时，可以使用简写直接赋值即可，如aa盒子的flex：3  0  200px；其中3，0，200px分别代表flex-grow，flex-shrink，flex-basis。

flex属性的两个快捷值：

①flex：auto；与flex：1 1 auto；等价

②flex：none；与与flex：0 0 auto；等价

3个属性的释义

①flex-grow：设置弹性盒子的伸展占宽/比例。默认为0，即不会进行放大。

②flex-shrink：设置弹性盒子的缩小占宽/比例。默认为1

③flex-basis：设置弹性盒子的伸缩值。默认为auto

（1）flex-grow

当flex属性的取值为一个非负的数字，则将该数字默认为flex-grow值。默认flex-shrink取值为1，flex-basis取值为0%。如下，3个css样式是相同的。

.aa{
flex: 1;
}
.aa{
flex: 1 1 0%;
}
.aa{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

当flex取值为两个非负数字，则分别默认为flex-grow和flex-shrink的值。flex-basis默认取 0%。如下，2个样式是相同的。

.aa{
flex: 1 2;
}
.aa{
flex-grow: 1;
flex-shrink: 2;
flex-basis: 0%;
}

当flex取值为一个非负数字和一个百分比或者长度（数值+单位px/rem等），则分别默认为flex-grow和flex-basis的值。flex-shrink值默认为 1。如下，2个样式是相同的。

.aa{
flex: 1 50%;
}
.aa{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
}

 例1：代码和效果图如下：

<template>
  <div class="container">
    <div class="aa">我是盒子aa</div>
    <div class="bb">我是盒子bb</div>
  </div>
</template>

<style>
.container {
  display: flex; /* 表示这个盒子使用Flex弹性布局 */
  margin: auto; /* 表示使这个盒子在页面上垂直居中*/
  width: 400px;
  height: 6rem;
  border: 0.1rem solid black; 
  background: rgb(169, 166, 166);
}
.aa {
  width: 100px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  background: rgb(247, 160, 174);
}
.bb {
  width: 100px;
  flex:3 1 50px;
  background: rgb(163, 160, 247);
}
</style>

container是整个大盒子，width为400px，填充颜色为灰色。

盒子 aa：width为100px，flex-grow的值为1，表示盒子aa占宽1份，故盒子aa的总width为：100px +（250/4）*1  = 162.5px。

盒子bb：width为237.5px，flex:3 1 50px;  其中3表示盒子bb占宽3份，故盒子bb的总width为：50px +（250/4）*3  = 237.5px。（PS：盒子aa的width是100px，但其真正的width取值由flex-basis的属性值决定，故为50px）

总占宽是大盒子未被占用的灰色部分为250px，被分成了1+3=4份，每份占宽为62.5px。

flex-grow起作用的前提是还存在供盒子可扩展的剩余空间，若将例1中的盒子bb的样式代码flex:3 1 50px;改为flex:3 1 300px;  此时盒子aa + 盒子bb的width为400px，已经将大盒子占满，flex-grow不再起作用，更改部分的代码和效果图如下：

 /* 盒子bb被更改的代码 */
  flex:3 1 300px;

（2）flex-shrink

flex-shrink的属性值可取非负整数、initial、inherit。

例2：当例1中的两个盒子的总width  >  大盒子的width，就需要flex-shrink来对两个小盒子进行压缩了。当盒子aa、盒子bb的flex-shrink值都为1时，两盒子总width超过大盒子时，则两个盒子会进行相同比例的压缩。在例1代码的基础上对盒子aa、bb的样式代码进行更改，盒子aa、bb的样式代码和效果图如下：

.aa {
  width: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
  background: rgb(247, 160, 174);
}
.bb {
  width: 200px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 400px; /* 这里的400px才是盒子bb的真正width*/
  background: rgb(163, 160, 247);
}

总witdh=200+400=600px，大盒子width=400px，故大盒子要缩小的比例为400/600=2/3。

盒子aa的width应缩小为200 * 2/3 = 133.33px；

盒子bb的width应缩小为400 * 2/3 = 266.67px；

如果设置盒子aa的flex-shrink:0，则在空间不足的情况下，盒子aa也不会进行缩小，更改例2中盒子aa的部分代码和效果图如下：

 /* 盒子aa被更改的代码 */
  flex-shrink: 0;

盒子aa并没有被缩小，其width仍为200px，盒子bb被缩小，其with为未被盒子aa占的空间：400-200=200px。

（3）flex-basis

当flex的取值为一个长度（数值+单位px/rem等）或百分比，则默认为flex-basis值 。且默认flex-grow、flex-shrink的值都为 1。如下，2个样式是相同的。

.aa{
  flex: 200px;
}
.aa{
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}

一个盒子的真正尺寸=flex-basis属性值+flex-grow属性值。

若flex-basis:auto;  则flex-basis的取值会默认为该盒子本身的尺寸，若该盒子本身未设置尺寸，则该盒子在页面上显示的宽度为flex-grow: 1;取得的占宽，即25px。

若flex-basis:0%;  即flex-basis的取值为0px，该盒子在页面上显示的宽度为flex-grow: 1;取得的占宽，即25px。

以上两种情况若该盒子flex-grow: 0;  则该盒子在页面上就不会显示。

例3：当flex-basis:auto;  flex-basis的取值会默认为该盒子的尺寸。将例1中的盒子aa、bb的部分样式代码进行更改，更改部分的代码和效果图如下：

/* 盒子aa被更改代码 */
  flex-grow: 0;

/* 盒子bb被更改代码 */
  flex:0 1 200px;

aa盒子的width为100px，flex-basis的值为auto，故flex-basis的取值为该盒子本身的尺寸100px，即该盒子的真正width。

bb盒子的width为100px，flex-basis的值为200px，则该盒子的真正width为flex-basis的取值，即200px。

灰色部分为大盒子剩余未被占用的空间，width为250px。

扩展：将例1中盒子bb的样式flex:0 1 200px;  改为flex:0 1 50px;   则该盒子的尺寸会变为50px，大盒子未占用的灰色部分尺寸为250px。效果图如下：

例4：若flex-basis的值为百分比，则该盒子的尺寸=祖先盒子*百分比，祖先盒子为声明了display:flex;的盒子，这里是大盒子container。将例1的样式代码进行更改，更改部分的代码和效果图如下：

 /* 盒子aa被更改代码 */
  flex-grow: 0;

/* 盒子bb被更改代码 */
  flex:0 1 60%;

盒子aa的width为100px，不做过多解释。

盒子bb的witdh为400*60%=240px。

若一个盒子没有父盒子的话，则它的flex-basis属性值为百分比时不起作用。

总结

①在width、flex-basis同时存在的情况下，flex-basis > width，width无作用。

②在不具备空间可用于盒子占宽/扩展的情况下，flex-grow无作用。

③盒子的真实尺寸为flex-basis属性值+flex-grow属性值。

④当盒子的flex-shrink属性值为0时，该盒子不会进行缩小。