自己理解起来，弹性布局可以分开两个意思，display：flex-box有弹性的意思，也有布局的意思
justify-content可以定好几种布局。弹性的话，flex-basis结合flex-shrink,flex-grow可让弹性元素分配空间。
假定弹性元素的长度只受内容影响，那flex就剩下布局的作用了。如下图
<div class="flex">
<div>内容1</div>
<div>第二个内容</div>
</div>
<style>
.flex{
display: flex;
flex-basis: auto;
width: auto;
justify-content: space-evenly;
}
div{
box-shadow: 0 0 0 1px black;
}
</style>但是当设置了flex-basis以后，就设定了弹性元素的（相当于width的）尺寸。width跟flex-basis的区别是，flex-basis的优先级更高。如果设置的flex-basis的值不为auto，那么width设置什么值都无效，以flex-basis的值为准。当flex-basis的值为auto的时候，弹性元素才会是width设定的值，如果连width的值都是auto，那就内容自适应把。
当设置了弹性元素的初始值后，可以结合flex-shrink,flex-grow 来分配父元素剩下的空间。
<div class="flex">
<div >内容1</div>
<div >第二个内容</div>
</div>
div{
box-shadow: 0 0 0 1px black;
}
<style>
.flex{
display: flex;
flex-basis: auto;
width: auto;
justify-content: space-evenly;
width: 200px
}
.flex div{
flex-basis: 50px;
flex-grow: 1;
flex-shrink: 1;
height: 25px;
}
</style>
每个弹性元素的长度都设置为50px。但最后显示都是100px每个。
弹性容器的长度为200px。两个弹性元素设定的初始长度为50px，总共就是100px
那么原本弹性容器剩下200-100=100px的空白。两个弹性元素的flex-grow都为1,则把100px的空白分配下来每个得到50px。
所以每个弹性元素的尺寸为flex-basis设定的50px+分配得到的空白50px=100px
flex-shrink同理，分配的是溢出的空间，父容器放不下，那就缩减弹性元素的尺寸。有多少空间放不下，就按flex-shrink标明的分量减少弹性元素的尺寸