Neat 2.0 结合 Flexbox 对齐中间

Question

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

我想要实现的是图像旁边的中间内容，然后是下一行。但是，出于某种原因，当我添加 display: flex 时，所有内容都放在同一行。

我做错了什么？

HTML（苗条）

.container
  - 3.times do
    .col middle
  .col--image 
    img src='//placehold.it/700'
  - 3.times do
    .col next row

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%;    
  }
}

我也有一个example codepen。

Answer 1

要使 next row 真正换行，您需要添加 flex-wrap: wrap

Updated codepen

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

Neat 2.0 结合 Flexbox 对齐中间

Neat 2.0 in combination with Flexbox to align middle

css

flexbox

neat