写一个布局随父容器大小变化而变化的窗体布局，左边三块，中间两块，右边四块，左列占四分之一中间占二分之一右边占四分之一

您可以使用CSS的Flexbox布局来创建一个布局随父容器大小变化而变化的窗体布局。以下是一个示例代码：

<div class="container">
  <div class="left">
    <!-- 左边三块内容 -->
  </div>
  <div class="middle">
    <!-- 中间两块内容 -->
  </div>
  <div class="right">
    <!-- 右边四块内容 -->
  </div>
</div>

.container {
  display: flex;
}

.left {
  flex: 1; /* 左边三块占据四分之一的空间 */
}

.middle {
  flex: 2; /* 中间两块占据二分之一的空间 */
}

.right {
  flex: 1; /* 右边四块占据四分之一的空间 */
}

在上述示例中，`.container` 是父容器，使用Flexbox布局来划分区域。`.left`、`.middle` 和 `.right` 是子容器，并根据Flexbox布局的设定来占据相应的空间。

通过设置子容器的flex属性，可以控制它们在父容器中的占比。在这个例子中，左边三块占据了四分之一的空间，中间两块占据了二分之一的空间，右边四块占据了四分之一的空间。

您可以根据需要调整子容器的占比以实现您想要的布局效果。