控制Flex子元素在主轴上的比例的方法

控制 Flex 子元素在主轴上的比例通常使用 flex 属性来实现。该属性的值必须为一个非负整数或一个比例值（即带有 fr 单位的数值），表示当前子元素在主轴上所占据的空间比例。下面是一些示例说明：

使用 flex 属性设置子元素占比

假设有一组 Flex 容器内有三个子元素需要均分主轴上的空间，可以使用 flex: 1 来将每个子元素都设置为等分主轴上的空间：

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  flex: 1;
}

注意，这里的 justify-content 属性用来控制子元素在主轴上的排列方式。这里使用的 space-between 值表示子元素之间留有空白的间隔。

使用带有比例值的 flex 属性

另一个例子是，假设 Flex 容器内有三个子元素，它们的宽度比例分别为 1：2：1，可以使用带有比例值的 flex 属性来实现：

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item:first-child,
.flex-item:last-child {
  flex: 1;
}

.flex-item:nth-child(2) {
  flex: 2;
}

这里，我们使用 :first-child 和 :last-child 伪类来选取第一个和最后一个子元素，并将它们的 flex 属性值都设置为 1。然后使用 :nth-child 伪类来选取第二个子元素，并将其 flex 属性值设置为 2。这样就可以实现子元素宽度的不同比例分配。

总之，控制 Flex 子元素在主轴上的比例是调整 Flex 盒模型布局中的主要技巧之一。熟练掌握此技巧可以帮助开发者更好地使用 Flex 布局。