flex-grow, flex-shrink, flex-basis的用法

在使用 CSS Flexbox 布局时，flex-grow、flex-shrink 和 flex-basis 是用来控制弹性盒子（flexbox）子项（flex items）在主轴上如何分配空间的重要属性。以下是它们的用法：

1. flex-grow：

   • flex-grow 属性决定了在剩余空间分配时，弹性盒子子项在主轴上增长的比率。
   • 该属性接受一个无单位的数字值，默认为 0。
   • 如果所有的子项的 flex-grow 都为 0，剩余空间将不会被分配给它们。
   • 如果一个子项的 flex-grow 值为 1，而其他子项的 flex-grow 值为 0，那么这个子项将占据所有的剩余空间。

.flex-item {
  flex-grow: 1; /* 子项会等比例地增长以填充剩余空间 */
}

2. flex-shrink：

   • flex-shrink 属性定义了在空间不足时，弹性盒子子项在主轴上收缩的比率。
   • 该属性接受一个无单位的数字值，默认为 1。
   • 如果所有的子项的 flex-shrink 都为 1，当空间不足时它们会等比例收缩。
   • 如果一个子项的 flex-shrink 值为 0，而其他子项的 flex-shrink 值不为 0，则当空间不足时，只有 flex-shrink 不为 0 的子项才会收缩。

.flex-item {
  flex-shrink: 1; /* 子项会等比例地收缩以适应空间不足 */
}

3. flex-basis：

   • flex-basis 属性定义了在分配空间之前，弹性盒子子项在主轴上的初始大小。
   • 该属性接受长度值或百分比值，默认为 auto。
   • 如果设置为长度值或百分比值，子项将以此值作为初始大小。如果设置为 auto，则根据内容自动确定大小。

.flex-item {
  flex-basis: 100px; /* 设置子项的初始大小为100像素 */
}

综合使用这些属性，可以创建出灵活且适应性强的布局，通过调整 flex-grow、flex-shrink 和 flex-basis 的值，可以达到不同的布局效果。