Css Neat 2.0与Flexbox结合，使中间对齐

我正在尝试使用Neat 2.0（处理水平对齐）和Flexbox（处理垂直对齐）

我试图实现的是图像旁边的中间内容，然后是下一行。然而，由于某种原因，当我添加

display:flex

时，所有内容都放在同一行上

我做错了什么

HTML（Slim）

SCSS

@import "neat@2.*";

.container {
    @include grid-container;
    @include grid-visual; /* temp guide */
    max-width: 600px;
    margin: 0 auto;
    display: flex; /* adding this wrecks things */
    align-items: center;
}

.col {
  @include grid-column(2);
}

.col--image {
  @include grid-column(6);

  img {
    width: 100%;
    max-width: 100%;    
  }
}

---

我也有一个。

要让下一行实际换行，您需要添加

flex-wrap:wrap

@import "neat@2.*";

.container {
    @include grid-container;
    @include grid-visual; /* temp guide */
    max-width: 600px;
    margin: 0 auto;
    display: flex; /* adding this wrecks things */
    align-items: center;
}

.col {
  @include grid-column(2);
}

.col--image {
  @include grid-column(6);

  img {
    width: 100%;
    max-width: 100%;    
  }
}

.container {
    @include grid-container;
    @include grid-visual;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;                      /* added property */
    align-items: center;
}