如何使用 CSS 设置元素宽度不等的 flexbox？

在 flexbox 中设置元素宽度不等有两种方法:

1. 使用 flex-basis 属性
2. 使用 flex-grow 和 flex-shrink 属性

方法1：使用 flex-basis 属性

flex-basis 属性用于指定一个元素在交叉轴上的长度，它的值可以是像素或百分比。在 flexbox 中，它代表元素在主轴上的初始长度。

假设我们想要一个 flexbox 容器，其中元素 A 的宽度为 200 像素，元素 B 的宽度为 300 像素，元素 C 的宽度为 100 像素，剩余空间由元素 D 占据，那么代码如下：

.flex-container {
  display: flex;
}

.a {
  flex-basis: 200px;
}

.b {
  flex-basis: 300px;
}

.c {
  flex-basis: 100px;
}

.d {
  flex-grow: 1;
}

在上述代码中，元素 A、B、C 分别设置了不同的 flex-basis 值，代表它们在主轴上的初始长度。元素 D 则设置了 flex-grow 值为 1，代表它将占据剩余的空间。

方法2：使用 flex-grow 和 flex-shrink 属性

flex-grow 和 flex-shrink 分别用于指定元素的放大和缩小比例，它们的值为整数，代表相对于其他元素的倍数。

假设我们想要一个 flexbox 容器，其中元素 A 的宽度为 200 像素，元素 B 的宽度为 300 像素，元素 C 的宽度为 100 像素，元素 D 的宽度为 400 像素，但当容器宽度小于 1000 像素时，我们希望元素 A 和 B 分别缩小一倍，元素 C 和 D 分别放大一倍，那么代码如下：

.flex-container {
  display: flex;
}

.a {
  width: 200px;
  flex-grow: 1;
  flex-shrink: 2;
}

.b {
  width: 300px;
  flex-grow: 1;
  flex-shrink: 2;
}

.c {
  width: 100px;
  flex-grow: 2;
  flex-shrink: 1;
}

.d {
  width: 400px;
  flex-grow: 2;
  flex-shrink: 1;
}

@media (max-width: 1000px) {
  .a {
    flex-shrink: 1;
  }
  
  .b {
    flex-shrink: 1;
  }
  
  .c {
    flex-grow: 1;
  }
  
  .d {
    flex-grow: 1;
  }
}

在上述代码中，元素 A 和 B 设置了相同的 flex-grow 和 flex-shrink 值，代表它们在宽度变小时会等比例缩小。元素 C 和 D 也设置了相同的 flex-grow 和 flex-shrink 值，代表它们在宽度变小时会等比例放大。在媒体查询中，我们根据容器宽度的变化，通过修改 flex-grow 和 flex-shrink 值，实现元素宽度的动态调整。

以上是关于如何使用 CSS 设置元素宽度不等的 flexbox 的介绍。