Flexboxと組み合わせてNeat 2.0を中間に配置する

Question

Flexbox（垂直アライメントを処理するため）と一緒にNeat 2.0（水平アライメントを処理する）を使用しようとしています。

私が達成しようとしているのは、画像の横にある中間のコンテンツで、次の行が続きます。しかし、何らかの理由で、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を持っています。実際にラップするnext rowについては

Answer 1

、あなたは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; 
} 

を追加する必要があります