1

I would like to know if it possible to arrange the boxes so the bottom two on the right fill the empty space. They are posts generated by a loop with the first post being unique and styled with the first-child-selector, so we cannot target an individual post.

flex layout

My CSS.

.section-news-content{
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-end;
    align-content:  flex-end}


.section-news-content article:first-child{
    padding: 0px;
        max-height: 900px;
}
.section-news-content article{
    width:33.33%;
    padding: 0 0 20px 20px;
    overflow: hidden;
    max-height: 450px;
}

.section-news-content article:first-child .feat-image{height: 400px}

.section-news-content article .feat-image{height: 200px}

.section-news-content article:first-child .post-text{height:500px}

.section-news-content article .post-text{height: 250px}

HTML

<div class="section-content section-news-content">

        <!----LOOP IS HERE----->

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="excerpts">
    <div class="feat-image">
        <?php the_post_thumbnail(); ?>
    </div>

    <div class="post-text">
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->
            <div class="entry-content">

            <span class="entry-date"><?php echo get_the_date(); ?></span>

            <span class="entry-text">   
                <?php
                    the_excerpt();
                ?>
            </span>
        </div><!-- .entry-content -->

        <!--//<?php if ( get_edit_post_link() ) : ?>
            <footer class="entry-footer">
                <?php
                    edit_post_link(
                        sprintf(
                            /* translators: %s: Name of current post */
                            esc_html__( 'Edit %s', 'recfishwa' ),
                            the_title( '<span class="screen-reader-text">"', '"`</span>', false )`
                        ),
                        '<span class="edit-link">',
                        '</span>'
                    );
                ?>

            </footer><!-- .entry-footer -->
        <?php endif; ?>
    </div>
    </div>
    </article><!-- #post-## -->


    </div>
JPB
  • 592
  • 2
  • 6
  • 28
  • 2
    This can be done with CSS Grid, but not with flexbox, unless you want to set a fixed height on the container and use `column wrap`. https://stackoverflow.com/q/34480760/3597276 – Michael Benjamin May 31 '17 at 12:12
  • You mean the empty space vertically or horizontally ? – Sylvain May 31 '17 at 12:12
  • The empty space on the right so the posts go up into it. – JPB May 31 '17 at 12:13
  • @Michael_B I dont want CSS grid as its too unsupported but I can set the height of the container as the large post is double the small and the posts are a fixed height so I am interested in that idea. Just add column wrap to the container? – JPB May 31 '17 at 12:16

0 Answers0