深入理解 flex-basic
一直对flex布局的flex-basic理解不够透测，今天准备通过实际的例子，加深对这个属性的理解
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。详细定义可以查看flex-basis
详细解析以下属性值：
- number: 一个长度单位或者一个百分比，规定 flex 元素的初始长度。
- auto: 默认值。长度等于 flex 元素的长度。如果该项目未指定长度，则长度将根据内容决定。
今天举例说明以下几个具体的使用场景，方便理解：
场景一： flex-basis为初始大小，具体是最大值还是最小值，根据flex-grow和 flex-shrink的值来定的。以下代码列举了2种场景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
/* 表现为：可以一直同比例缩小，但是不能发大，最大值为flex-basis设置的值 */
#main div {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 150px;
}
/* 表现为：可以一直同比例放大，但是不能缩小，最小值为flex-basis设置的值 */
/* #main div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 150px;
} */
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">1</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:khaki;">3</div>
<div style="background-color:pink;">4</div>
<div style="background-color:lightgrey;">5</div>
</div>
</body>
</html>
由于篇幅原因，只列举css样式，html同上
场景二： 如果flex-grow和flex-shrink都设置为1，表示同比例放大和缩小。flex-basis: auto效果等同于auto(长度等于此元素的长度。如果该元素未指定长度，则长度将根据内容决定。)通过css3选择器，设置第二个元素的初始宽短是100px，按照正常的理解，不管怎么缩放，第二个元素应该总比其他元素多100px的宽，但是通过实际的测试，发现事实不是这样的：
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
#main div:nth-of-type(2) {
flex-basis: 100px;
}
但是如果都给一个初始值，效果就是我们期望的了
#main div {
flex-grow: 1;
flex-shrink: 1;
//统一给一个初始值，第二个元素跟其他元素相差80px整
flex-basis: 20px;
}
#main div:nth-of-type(2) {
flex-basis: 100px;
}
场景三： 我们都知道如果设置了flex-basis:auto后，如果该元素未指定长度，则长度将根据内容决定。下面的代码表明其他元素的初始宽度是100px,然后第二个元素的初始宽度是父元素的0%。当一个元素同时设置了width和flex-basis，此时flex-basis的优先级更高。
#main div {
width: 100px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
#main div:nth-of-type(2) {
flex-basis: 0%;
}
通过以上的代码演示，我们总结一下（前提都是flex布局）：
flex-basis指定了 flex 元素在主轴方向上的初始大小，包含了几种情况：
- flex-basis有值的情况下，具体是最大值还是最小值，根据flex-grow和 flex-shrink的值来定的。
- 某一个元素的flex-basis值跟其他兄弟元素相比更大或更小时，表现在缩放上，他们的最终大小也是等于他们的相差数。
- 当一个元素同时设置了width和flex-basis，此时flex-basis的优先级更高，以flex-basis为准。
注意：flex-basis指明的是主轴方向的初始大小，当flex-direction: column时，flex-basis代表的是height;当flex-direction:row时，flex-basis代表的是width
