[Resolved] Flexbox push last element to bottom

[Tim]

Hello

I am utilising flex following David’s suggestion in a previous topic.

I understand that from this example it is possible to push the last element in a container to the bottom, by setting the preceding element to flex-grow: 1 But it doesn’t seem to do anything.
https://stackoverflow.com/a/56418077

HTML

<div class="entry-content" itemprop="text">

	<div class="publication-header">
		<figure class="publication-header-media">
			<?php
			$cover = get_field('cover');
			$size = 'full'; // (thumbnail, medium, large, full or custom size)
			if( $cover ) {
				echo wp_get_attachment_image( $cover, $size );
			}
			?>
		</figure>

		<div class="publication-header-content">

			<?php if( get_field('authors') ): ?>
				<p>Authors: <?php the_field('authors'); ?></p>
			<?php endif; ?>

			<?php if( get_field('photography') ): ?>
				<p>Photography: <?php the_field('photography'); ?></p>
			<?php endif; ?>

			<?php if( get_field('pages') ): ?>
				<p>Pages: <?php the_field('pages'); ?></p>
			<?php endif; ?>

			<?php if( get_field('publisher') ): ?>
				<p>Publisher: <?php the_field('publisher'); ?></p>
			<?php endif; ?>

			<?php if( get_field('isbn') ): ?>
				<p>ISBN: <?php the_field('isbn'); ?></p>
			<?php endif; ?>

			<?php if( get_field('link') ): ?>
				<p>
					<i class="fas fa-external-link-alt"></i>
					<a href="<?php the_field('link'); ?>"> Publication Link</a>
				</p>
			<?php endif; ?>

			<?php if( get_field('quote') ): ?>
				<blockquote class="wp-block-quote">
					<p><?php the_field('quote'); ?></p>
					<?php if( get_field('citation') ): ?>
						<cite><?php the_field('citation'); ?></cite>
					<?php endif; ?>
				</blockquote>
			<?php endif; ?>
		</div>
	</div>

	<?php if( get_field('description') ): ?>
		<?php the_field('description'); ?>
	<?php endif; ?>

</div>

CSS

/* Publication Posts */

.publication-header-media {
  flex: 0 0 50%;
	margin-bottom: 2em;
}

.publication-header-media img {
  width: 100%;
}

.publication-header-content {
    padding-left: 20px;
    box-sizing: border-box ;
}

.publication-header-content p {
   margin-bottom: 0.5em;
}

@media (min-width: 769px) {
    .publication-header {
        display: flex;
    }
}

I want to push the <blockquote> to the bottom of the container, eg align to bottom of the <figure> when viewed at min-width: 769px.

I tried a few things but didn’t get the intended result.

[David]

Hi there,

try this:

.publication-header-content {
    display: flex;
    flex-direction: column;
}
.publication-header-content blockquote {
    margin-top: auto;
}

[Tim]

Nice.

That works very well.

Thank you David.

[David]

You’re welcome

[Author]

Posts