Flex弹性布局（⼀）——三个参数
Flex是Flexible Box的缩写，意为“弹性布局”，⽤来为盒状模型提供最⼤的灵活性，任何⼀个容器都可以指定为Flex布局。
先说⾮常⾮常基础的东西，在使⽤Flex布局时要先定义该盒⼦为Flex布局，有两种表现⽅式：
第⼀种（直接在div上设置样式）
<div >
<div >我是aa</div>
<div >我是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。效果图如下：
flex布局对齐方式例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⽆作⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。