flex布局，从左到右，左边固定宽度，右边铺满

可以使用 flex 布局中的 `flex-grow` 和 `flex-shrink` 属性来实现左边固定宽度，右边铺满的效果。

首先，需要将父元素设置成 `display: flex`，然后将左边元素的宽度固定，可以使用 `width` 属性或 `flex-basis` 属性来实现。接着，将右边元素的 `flex-grow` 属性设置为 1，表示在剩余空间中占据全部空间。

示例代码如下：

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边铺满</div>
</div>

.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  flex-grow: 1;
}

这样就可以实现左边固定宽度，右边铺满的效果了。

相关问题

flex布局最后一行不让铺满

Flex布局中，如果你想要让某一排的元素不会自动铺满整个容器，你可以通过设置`flex-wrap`属性为`wrap`，然后调整`flex-grow`值为0或一个较小的数字，防止某个元素无限增长。比如：

.container {
  display: flex;
  flex-wrap: wrap; /* 添加此行 */
}

.item {
  flex: 0 1 auto; /* 或者 flex-basis: auto; 这样可以让元素不再自动填充剩余空间 */
}

这里`.item`代表你需要限制大小的元素，它的flex-grow值设为0，意味着它不会自动扩大占据更多的空间。当容器宽度不足以完全展示所有 `.item` 时，它们就会换到下一行。

我有左中右三个div，左中div都是固定宽度，如何让右div铺满剩余宽度，并且固定

可以使用CSS中的flexbox来实现这个布局。首先，将父元素设置为flex容器，然后将左中div设置为固定宽度，右div设置为flex-grow: 1; 和flex-shrink: 0;，这样右div就会自动铺满剩余的宽度，并且不会缩小。

以下是示例代码：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS:

.container {
  display: flex;
}

.left {
  width: 100px;
}

.middle {
  width: 200px;
}

.right {
  flex-grow: 1;
  flex-shrink: 0;
}

这样，右侧的div就会自动铺满剩余的宽度，并且不会缩小。