写一个布局，分为左右，中间有宽为30像素的间隔，左盒子有ul元素，ul里面有10个li元素，屏幕最大的时候排四个，屏幕宽度小于1200px,li元素一排排三个

以下是一个简单的布局示例，满足你的要求：

HTML 代码：

<div class="container">
  <div class="left">
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
    </ul>
  </div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

CSS 代码：

.container {
  display: flex;
  align-items: stretch;
  height: 500px;
}

.left {
  flex: 1;
}

.middle {
  width: 30px;
  background-color: #ccc;
}

.right {
  flex: 1;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

li {
  width: calc(25% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  li {
    width: calc(33.33% - 10px);
  }
}

上述代码中，使用了 Flex 布局来实现左右两个盒子的等分排布。通过设置 `flex: 1` 属性，左右盒子的宽度会自适应屏幕大小。

中间的间隔使用了一个宽度为 30px 的 `div` 元素，并设置了背景色为灰色。

`ul` 元素中的 `li` 元素使用了 Flex 布局，通过设置 `flex-wrap: wrap` 属性，当屏幕宽度不够时，`li` 元素会自动换行。同时，根据设备屏幕大小，设置了不同的宽度和间距，从而实现了自适应布局。

在屏幕最大的情况下，`li` 元素一行排 4 个，在屏幕宽度小于 1200px 时，`li` 元素一行排 3 个。