父元素宽度不固定，左侧及中间元素宽度自适应，右侧元素宽度固定，这种布局样式该怎么写？

可以使用flex布局实现这种样式，但是也要视情况而定，一般分为两种情况：1.左侧和中间元素平均分配剩余的宽度；2.左侧和中间元素需要按照自己的子元素分配剩余宽度

一、平均分配剩余的宽度

• 父元素容器使用display: flex，将子元素放在一行中。

• 左侧和中间元素使用flex-grow: 1，表示它们的宽度自适应，并且平均分配剩余的宽度。

• 右侧元素使用width: 200px，表示它的宽度固定为200px。

Html代码：

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

CSS代码：

.container {
  display: flex;
  align-items: center;
}
.left {
  flex-grow: 1;
  background-color: red;
}
.middle {
  flex-grow: 1;
  background-color: green;
}
.right {
  width: 200px;
  background-color: blue;
}

二、按照自己的子元素分配剩余宽度

• 使用flex-basis来设置它们的初始宽度，再配合flex-grow来实现自适应剩余宽度的效果。

• 左侧和中间元素使用相同的样式，分别设置flex-basis: 0和flex-grow: 1，表示它们的初始宽度为0，但是可以自适应剩余宽度。

• 右侧元素的宽度仍然是固定的，使用了width: 200px。

这样设置之后，左侧和中间元素的宽度会按照它们内部的内容自适应，如果左侧元素的内容比中间元素的内容多，那么左侧元素会占用更多的宽度。如果中间元素的内容比左侧元素的内容多，那么中间元素会占用更多的宽度。同时，右侧元素的宽度仍然是固定的。

Html代码：

<div class="container">
  <div class="left">
    <div class="content">左侧内容</div>
  </div>
  <div class="middle">
    <div class="content">中间内容</div>
  </div>
  <div class="right">
    <div class="content">右侧内容</div>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
}
.left, .middle {
  flex-basis: 0;
  flex-grow: 1;
}
.right {
  width: 200px;
}
.content {
  padding: 10px;
  background-color: #f5f5f5;
}