Limit images per line using Flexbox

Question

I’m using flexbox to show images, but it lists all in one row, I wish I could 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 pagination style to display the images, it’s all right, however, it’s showing everything in the same line, I’d like you to show 3 by lines...

http://planow.com.br/jrgrill/dicas.php

php to display with paging:

$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>

Answer 1

It seems you forgot to tell CSS that the container is multiline:

flex-wrap: wrap;

http://jsfiddle.net/7rz29/