Css flex box如何在多个flex行的右侧有一个静态固定列？

目前CSS正在生成以下内容：

我试图实现的是，在flex box仍在工作的情况下，不使用浮动的情况下，不使用flex容器

标记

<div>
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

---

将外部div设为flex容器（并从

.col

中移除

float

）

CSS

HTML

1
2
3
4
5
6


1
2
3
4
5
6

.wrapper{
显示器：flex；
}
.仪表板{
弹性：10；
}
上校{
flex:0300px；
高度：600px；
背景：橙色；
}
.柔性容器{
显示器：flex；
证明内容：周围的空间；
柔性包装：nowrap；
}
.弹性项目{
背景：番茄；
填充物：5px；
弹性：10；
最大宽度：200px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}

1
2
3
4
5
6


1
2
3
4
5
6

左边距：1米；以.col作为画龙点睛；）@Gerard Done:）谢谢，这在放置方面是有效的，但在另一个答案中，flex项仍然是灵活的，并且expand@LeonGaban是的，很好地删除

-webkit flex flow:row wrap和添加
弹性收缩：0来自我的，它也是。我没有改变这一点，因为我以为你想在没有空间的时候把它们包起来。如果没有，它们会相互重叠，看起来真的很像bad@LeonGaban非常感谢你
@import "compass/css3";
// .dashboard { float: left; }
.col {
  float: right;
  width: 300px;
  height: 600px;
  background: orange;
}

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

.flex-outer {
  display: flex;
}

<div class="flex-outer">
  ....
</div>