Archived topic
Flexbox push last element to bottom
3 replies · Started by Tim on April 4, 2020
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.
Hi there,
try this:
.publication-header-content {
display: flex;
flex-direction: column;
}
.publication-header-content blockquote {
margin-top: auto;
}
Nice.
That works very well.
Thank you David.
You're welcome