What is the CSS Flexible Box Layout? code example

Example 1: flexible content

<?php if( have_rows('content') ): ?>
    <?php while( have_rows('content') ): the_row(); ?>
        <?php if( get_row_layout() == 'paragraph' ): ?>
            <?php the_sub_field('paragraph'); ?>
        <?php elseif( get_row_layout() == 'image' ): 
            $image = get_sub_field('image');
            ?>
            <figure>
                <?php echo wp_get_attachment_image( $image['ID'], 'full' ); ?>
                <figcaption><?php echo $image['caption']; ?></figcaption>
            </figure>
        <?php endif; ?>
    <?php endwhile; ?>
<?php endif; ?>

Example 2: flexbox css

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

Example 3: display flex css

.class {
  display: flex;
}

/* use display: flex to turn CSS element into a flexbox */

Example 4: flex property in css

The flex property is a shorthand property for:

flex-grow
flex-shrink
flex-basis