Image limit per line using FlexBox

I'm using flexbox to display images, however it lists all in one line, I'd like to be able to display 3 images per line.

HTML structure:

<section class="content">
    <?php
    $i=0;
    $sql = mysql_query("SELECT * FROM slideshows");
    while($result = mysql_fetch_array($sql)){
        $imagem = $result['imagem'];
        $titulo = $result['titulo'];?>
        <div class="item"><img src="<?php echo $imagem; ?>"></div>
    <?php }?>
</section>

CSS:

.content{
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}

.item{
width:303px; height: 242px;
display: block;
}

I'm using a paging style to display the images, it's all right, however, it's displaying everything on the same line, I'd like it to show 3 lines ...

link

php to display with the page:

$outputList = '';

while ($ row = mysql_fetch_array ($ sql2)) {

$id = $row["id"];
$imagem = $row["imagem"];
$nome = $row["nome"];
$nome = utf8_encode($nome);

$outputList .= '<section class="content"><div class="item"><img src="admin/images/' . $imagem . '"></div><div class="caixa-texto">' . $nome . ' </div></section>';

} // close while loop ? >

                <div class="imagens-dicas-churrasco">
                <?php print "$outputList"; ?>
            </div>
            <div style="padding:6px;float:right;"><?php echo $paginationDisplay; ?></div>