[Resolved] Flexbox push last element to bottom

Home Forums Support Flexbox push last element to bottom

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1226899
    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.

    #1227118
    David
    Staff
    Customer Support

    Hi there,

    try this:

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

    Nice.

    That works very well.

    Thank you David.

    #1227213
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.