flex是什么属性的缩写？是flex-grow和flex-shrink和flex-basis

flex布局概念：

父级元素称为：容器（container）
容器的子元素称之为：项目（item）

flex-grow的简单介绍

flex-grow：用于指定弹性元素在可用空间增加时的放大比例。
它决定了弹性元素在可用的父容器中【分配额外空间的比例】。
flex-grow 默认值为 0，表示弹性元素不会放大。
需要注意一下：flex-grow属性的比例计算是相对于其他非零 flex-grow 值的弹性元素而言的。

当容器有可用空间时，flex-grow 具体计算方法如下

1.计算所有弹性元素中，非零flex-grow元素值的和 sum
2.用父容器的空间，减去已经占用的空间(所有子元素占用的空间之和)得到剩余空间。
3.(每个非零flex-grow的值 / 非零flex-grow元素值的和sum) * 剩余空间

flex-grow的使用

<div class="container">
  <div class="item box1">Item 1</div>
  <div class="item box2">Item 2</div>
  <div class="item box3">Item 3</div>
</div>

.container {
  display: flex;
  width: 600px;
}

.item {
  width: 100px;
  height: 100px;
}
.box1{
 flex-grow: 1;
 background-color: red;
}
.box2{
 flex-grow: 2;
 background-color: blue;
}
.box3{
 flex-grow: 3;
 background-color: pink;
}

计算方法

1==>非零flex-grow值的总和为1 + 2 + 3 = 6
2==>上面父容器的空间是：600px;每个弹性元素的初始宽度为100px。
剩余空间为 600px - (100px * 3) = 300px。
3==>每个元素分配空间分别为：
box1:(1 / 6) * 300px = 50px
box2:(2 / 6) * 300px = 100px
box3:(3 / 6) * 300px = 150px
因此，最终的宽度分配为
box1: 100px + 50px = 150px
box2: 100px + 100px = 200px
box3: 100px + 150px = 250px

flex-shrink 在子元素上的简单介绍

flex-shrink 属性定义了项目的缩小比例，默认为1。
即如果空间不足，该项目将缩小。
如果在子元素的css样式中添加flex-shrink:0，
那么当前元素就不会被其他子元素挤压(也就是不会被缩放)

flex-basis的简单介绍

flex-basis：用于指定弹性元素在主轴方向上的初始大小。
flex-basis默认值为 auto,表示弹性元素参照自身的 width 或 height;
需要注意，在 flex 布局中：
如果设置弹性元素的 flex-basis: 非auto ，flex-basis的优先级 > width 或 height
也就是说，宽度的总优先级（以 width 举例）： max-width > flex-basis > width。
要注意的是，由于flex-basis接受的是长度或百分比值 【提醒】

flex-basis: 0%

flex-basis: 0%; 这定义了项目在主轴上的基础大小。
对于这里，0%意味着项目的【基础大小是其内容的大小】，
除非有其他因素（如其他CSS属性或flex容器的大小）改变了它。
要注意的是，由于flex-basis接受的是长度或百分比值 【提醒】

flex: 1

flex: 1的含义
如果只给1个弹性元素设置，表示该弹性元素占满全部的剩余空间。
如果给所有的弹性元素都设置，表示平分所有的剩余空间。

flex:1 1 0%;

总的来说，flex: 1 1 0%;
这样的设置意味着该项目会尝试占用额外的空间（如果有的话），
并在需要时缩小以适应容器，但其基础大小是其内容的大小。

面试题 flex是什么属性的缩写

flex 是 flex-grow 、 flex-shrink、 flex-basis 的缩写 
flex-grow：它决定了弹性元素在可用的父容器中【分配额外空间的比例】
flex-shrink：定义了项目的缩小比例， 0 不缩放，1缩放
flex-basis：用于指定弹性元素在主轴方向上的初始大小。
这3个属性都是子元素上的属性 【提醒】

wrap ==> /ræp/ 读音 ra p ==> 包，换行
grow ==> /ɡrəʊ/    gei no 扩大
shrink  /ʃrɪŋk/    shun k 缩水
basis   /ˈbeɪ sɪ s/       基础