一个父盒子三个子盒子，左边一个长的，右边竖向均匀排列两个短的，怎么用flex布局来写

您可以使用Flex布局的`flex-direction`属性来实现这个需求。设置父盒子的`flex-direction`为`row`，即水平排列子盒子。然后，将左侧子盒子的`flex-grow`属性设置为一个较大的值，以便它占据剩余空间。右侧两个子盒子默认会平分剩余空间，因为它们的`flex-grow`属性默认值为1。

以下是示例代码：

<style>
  .parent {
    display: flex;
    flex-direction: row;
  }

  .long-box {
    flex-grow: 2; /* 占据剩余空间的比例 */
    background-color: lightblue;
    height: 100px;
  }

  .short-box {
    flex-grow: 1; /* 平分剩余空间的比例 */
    background-color: lightgreen;
    height: 100px;
  }
</style>

<div class="parent">
  <div class="long-box"></div>
  <div class="short-box"></div>
  <div class="short-box"></div>
</div>

在上面的示例中，父盒子使用了Flex布局，并且子盒子通过设置`flex-grow`属性实现了指定的布局效果。左侧长盒子的背景颜色为lightblue，右侧两个短盒子的背景颜色为lightgreen。您可以根据需要调整盒子的高度和其他样式。