前端学习4 flex:1

flex:1

flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。

flex-grow 默认为0， 只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。

flex-shrink 默认为1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩。

flex-basis 默认为 auto, 即元素本身的大小。这个属性定义了在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性计算是否有多余空间。可以设置为和 width 和 height 属性一样的值，比如 220px，则元素占据固定空间。

flex: 1 的意思是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 意思就是： 元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。

flex:1对width的影响

flex对width的影响主要取决于flex-basis。

flex-basis = 0

.item {
  
  flex: 1; /* flex-basis: 0 */
  
  width: 200px;
}

width:200px 不会生效，因为flex-basis的优先级更高

元素会根据 flex 容器剩余空间按比例分配（flex-grow）

显式设置 flex-basis

.item {
  
  flex: 1 1 200px; /* 显式设置 flex-basis */
  
  width: 300px;
}

width:300px 不会生效，因为 flex-basis 优先级高于 width

元素初始尺寸为 200px，然后根据 flex-grow 分配剩余空间

没有设置 flex 简写

.item {
  
  flex-grow: 1;
  
  width: 200px;
}

width:200px 会生效，作为初始尺寸

元素会从 200px 开始，然后根据 flex-grow 分配剩余空间