Neat 2.0 en combinaison avec Flexbox pour aligner le milieu

Question

J'essaie d'utiliser Neat 2.0 (pour gérer les alignements horizontaux) avec Flexbox (pour gérer les alignements verticaux). Ce que j'essaye de réaliser est le contenu du milieu à côté de l'image, suivi par la rangée suivante. Cependant, pour une raison quelconque, tout est mis sur la même ligne quand j'ajoute display: flex.

Que fais-je incorrectement?

HTML (Slim)

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

J'ai un example codepen aussi.

Answer 1

Pour la next row pour envelopper réellement, vous devez ajouter 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; 
}