flexbox acf generatepress

HI

I am trying to displaying images fields via generatepress acf and flexbox.

The link below works on my webpage with html and css. However, when images are dynamic (acf) the images with flexbox just align in one column.

(flexbox original source: http://codepen.io/mazil/pen/ZbxBLa

1. I added the flexbox example (http://codepen.io/mazil/pen/ZbxBLa
) to my web page successfully and flexbox worked displaying images left to right in grid formation.

2. Then i tried to add my custom image fields ‘profile_picture’ – The outcome was that images had containers but the flexbox displayed each item/image in one column? I can see the gallery css has ‘display: flex;’ but it’s broken?

<div class="container">
	
		      <?php
		    $args = array(
			 'post_type' =>'artist',);
				$query = new WP_Query( $args ); ?>
       <?php if ( $query->have_posts()) : while ( $query->have_posts() ) : $query->the_post(); ?>

		<?php
		$attachment_id = get_field('profile_picture');
	  $size = "medium"; // (thumbnail, medium, large, full or custom size)
	  $image = wp_get_attachment_image_src( $attachment_id, $size );
	

 if ( $image ) { ?>

			<div class="gallery">
								<div class="gallery--item"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
	              <img class="gallery--image" alt="Image of <?php the_title(); ?>" src="<?php echo $image[0]; ?>" />
	             </a>
                       </div>
			</div>
<?php } ?>

<?php endwhile; ?><?else: ?>

<?endif; ?>
</div>