自己理解起来,弹性布局可以分开两个意思,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,那就内容自适应把。