1 .parent {
2 display: flex;
3 width: 400px;
4 height: 200px;
5 background-color: blueviolet;
8 .child {
9 width: 50px;
10 height: 50px;
11 flex-basis: auto;
12 background-color: aqua;
13 border: 1px solid black;
在同时用长度设置flex-basis和width时，width将无效，根据flex-basis的值决定尺寸
在设置flex-basis为content时，子项目的尺寸根据内容的大小决定
4.5 联合写法flex属性
flex属性是flex-grow，flex-shrink，flex-basis三个属性的简写，用于控制子项目的缩放行为和初始尺寸。
flex的完整写法是 flex：<flex-grow> <flex-shrink> <flex-basis>，也就是一共有3个值要去设置，分别按顺序对应flex-grow，flex-shrink，flex-basis，而在日常工作中并不会经常写完整的写法，而较常用的是flex：1或者50%这种写法。
flex-grow和flex-shrink可以同时设置，但是对于一个元素，同时只会有其中一者生效，因为flex-grow需要有剩余空间才能进行拉伸分配而flex-shrink需要子元素宽度之和超过父元素（溢出）才会收缩，一个盒子要么空间不足，要么就空间超出，不可能既有剩余空间又宽度之和超出父元素
flex属性的常用值有
flex: auto: 此值表示元素可以根据可用空间进行伸缩，可以扩展也可以收缩。
flex: initial: 此值将 flex-grow、flex-shrink 和 flex-basis 设置为默认值。flex-grow 为 0，flex-shrink 为 1，flex-basis 为 auto。
flex: none: 此值表示元素不应该伸缩。flex-grow 和 flex-shrink 均为 0，flex-basis 为其本来的大小。
flex: 数字/百分比/长度
flex:auto代表的是 flex:1 1 auto（flex-grow:1, flex-shrink: 1, flex-basis: auto) ，表示的是根据具体空间来进行扩展或者收缩
flex:initial（默认值）代表的是 flex:0 1 auto（flex-grow:0, flex-shrink: 1, flex-basis: auto) ，表示子项目不会在有剩余空间时候扩张，但是超出时会要收缩。
flex:none 代表的是 flex:0 0 auto（flex-grow:0, flex-shrink: 0, flex-basis: auto)，表示子项目不会扩张也不会收缩，保持原有尺寸
在超出父容器的时候，也会继续保持原有的尺寸
如果只写一个值，类似于flex: 1 这种，分2种情况
如果写的是数字比如，flex: 1，flex: 2，flex: 3这种那设置的是flex-grow的值，其他2个值取默认
如果写的是百分比（flex: 20%）或者是长度（flex: 100px），就是设置的flex-basis属性，其他2个值取默认
如果只写两个值，第一个值对应的是flex-grow，第二个值对应2种情况
如果第二个值写的是数字比如，flex: 1，flex: 2，flex: 3这种那设置的是flex-shrink的值
如果写的是百分比（flex: 20%）或者是长度（flex: 100px），就是设置的flex-basis属性
如果写三个值，对应地去设置flex-grow、flex-shrink 和 flex-basis
简单案例：
场景1：简单实现一个两栏布局，左列定宽，右边自适应
这里用到flex: 1 让右边的项目自动根据剩余空间扩张
1 <style>
2 .parent {
3 display: flex;
4 width: 400px;
5 height: 200px;
6 background-color: blueviolet;
9 .child1 {
10 width: 100px;
11 height: 50px;
12 background-color: aqua;
13 border: 1px solid black;
14 }
15 .child2 {
16 height: 50px;
17 background-color: aqua;
18 flex: 1;
19 border: 1px solid black;
20 }
21 </style>
23 <body>
24 <div class="parent">
25 <div class="child1">1111</div>
26 <div class="child2">2</div>
27 </div>
28 </body>
场景2：让多个盒子分行排列，每行要三个盒子，同时宽度自适应
这里要对父容器设置flex-wrap：wrap，对子项目设置，flex：33%来让它们每行排列3个
1 <style>
2 .parent {
3 display: flex;
4 justify-content: space-between;
5 flex-wrap: wrap;
6 width: 400px;
7 height: 200px;
8 background-color: blueviolet;
11 .child {
12 box-sizing: border-box;
13 flex: 33%;
14 height: 50px;
15 background-color: aqua;
16 border: 1px solid black;
17 }
18 </style>
20 <body>
21 <div class="parent">
22 <div class="child">1</div>
23 <div class="child">2</div>
24 <div class="child">3</div>
25 <div class="child">4</div>
26 <div class="child">5</div>
27 <div class="child">6</div>
28 </div>
29 </body>
4.6 子项目单独对齐align-self属性
align-self属性用于调整Flex容器中单个项目（Flex项）的垂直对齐方式。它允许你为单个项目指定不同于其它项目的垂直对齐方式。align-self属性可以应用于任何Flex项，并覆盖容器级别的垂直对齐设置（通过align-items属性设置）
常用的值有：
auto（默认值）：继承自父容器的align-items属性。
flex-start：项目与容器的顶部对齐。
flex-end：项目与容器的底部对齐。
center：项目在容器的垂直中心对齐。
baseline：项目与容器的基线对齐。
stretch：项目被拉伸以填充整个容器的高度。
这些取值都在前面的align-items中介绍过了，这里只用一些案例来演示align-self的效果
针对第二个子项目，设置了align-self: center，第三个子项目设置了align-self: flex-end
这里是单行的align-self效果
1 .parent {
2 display: flex;
3 align-items: flex-start;
4 width: 400px;
5 height: 200px;
6 background-color: blueviolet;
9 .child {
10 box-sizing: border-box;
11 width: 100px;
12 height: 50px;
13 background-color: aqua;
14 border: 1px solid black;
17 #two{
18 align-self: center;
20 #three{
21 align-self: flex-end;
如果在父容器中加入换行，效果如下
