举例说明with属性的fill-available有什么应用场景？

fill-available 在 width 或 height 属性中与 grid 布局或 flexbox 布局一起使用时，可以创建一些有趣的布局效果。它本质上是让元素填满可用空间，与 stretch 类似，但在某些情况下表现不同。

以下是一些 fill-available 的应用场景：

1. Grid 布局中的等高列：

假设你有一个网格布局，希望所有列的高度相同，即使它们的内容长度不同。可以使用 fill-available 来实现：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  height: fill-available; /*  使所有项目高度相同 */
  border: 1px solid black;
}

即使每个 .grid-item 的内容高度不同，它们也会占据网格容器的整个高度，从而创建等高的列。

2. Flexbox 布局中的垂直居中：

在 Flexbox 布局中，如果要将一个项目垂直居中于其父容器，可以使用以下方法：

.flex-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置容器高度 */
}

.flex-item {
  width: fill-available; /* 填满剩余宽度 */
  height: fit-content; /*  根据内容调整高度 */
  border: 1px solid black;
}

.flex-item 将根据其内容调整高度，并水平填满父容器的剩余宽度，同时保持垂直居中。

3. 与 min-content 和 max-content 结合使用：

fill-available 可以与 min-content 和 max-content 结合使用，创建更灵活的布局。例如：

.container {
  width: 300px;
}

.item {
  width: fill-available;
  min-width: 100px;  /* 最小宽度 */
  max-width: 200px;  /* 最大宽度 */
}

在这个例子中，.item 将尝试填满 .container 的宽度 (300px)，但其宽度会被限制在 100px 到 200px 之间。如果 .container 的宽度小于 100px，.item 的宽度将是 100px；如果 .container 的宽度大于 200px，.item 的宽度将是 200px。

4. 解决 stretch 在绝对定位下的问题：

在某些情况下，stretch 在绝对定位的 flex 项上可能无法正常工作。fill-available 可以作为一种替代方案。

总结:

fill-available 提供了一种灵活的方式来控制元素的大小，使其填满可用空间，同时尊重 min- 和 max- 的限制。它在 grid 和 flexbox 布局中特别有用，可以帮助创建更复杂的响应式布局。 然而，需要注意的是，fill-available 的浏览器兼容性不如其他一些属性，尤其是在旧版浏览器中。 所以在使用前需要考虑兼容性问题。 可以使用 width: -webkit-fill-available; 来增强兼容性，但这也不是所有浏览器都支持的。 现在更推荐使用stretch，因为它兼容性更好。