页面实现左中右布局，1. 左侧：宽度固定150px，高度自动撑开，和右侧同高 2. 中间：宽度自适应，高度自动撑开，和左侧同高 3. 右侧：宽度固定100px，高度自动撑开，和左侧同高

可以使用 CSS 的 flexbox 布局来实现左中右布局，具体代码如下：

HTML 代码：

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

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

.left {
  width: 150px;
  flex: 0 0 150px;
}

.middle {
  flex: 1;
}

.right {
  width: 100px;
  flex: 0 0 100px;
}

解释一下 CSS 的属性：

1. `display: flex;` 设置容器为 flexbox 布局。
2. `flex-wrap: wrap;` 设置 flexbox 中的子元素可以换行。
3. `align-items: stretch;` 设置子元素在容器中垂直方向上拉伸，使其与容器等高。
4. `justify-content: space-between;` 设置子元素在容器中水平方向上分布，左右两个子元素与容器两端对齐。
5. `flex: 0 0 150px;` 设置子元素的 flex 属性，其中第一个值为 flex-grow，表示子元素在容器中占用剩余空间的比例；第二个值为 flex-shrink，表示子元素在容器中缩小的比例；第三个值为 flex-basis，表示子元素在容器中的初始大小。对于左右两个子元素，flex-grow 和 flex-shrink 都为 0，只有 flex-basis 不同；对于中间子元素，flex-grow 为 1，flex-shrink 和 flex-basis 都为 0，表示子元素会占用容器中剩余的空间。