Как с помощью flexbox переместить нижние блоки в свободное пространство (см. на картинке)?

Question

[MaximYurin]

Всем привет!!!
Имеется такая разметка:

<div class="page_content gallery_page">
                    <?php
                    $i = 0;
                    if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <div class="gallery_post">
                            <a href="<?php the_permalink(); ?>">
                                <?php                                                                               
                                if($i == 2){
                                    echo get_the_post_thumbnail($post->ID, 'gallery-vertical');
                                } else if ($i == 7) {
                                    echo get_the_post_thumbnail($post->ID, 'gallery-big-kvadrat');
                                } else {
                                    echo get_the_post_thumbnail($post->ID, 'gallery-kvadrat');
                                }
                                $i++;
                                ?>
                                <span class="mask">
                                    <span class="arrow">
                                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                                    </span>
                                </span>
                            </a>
                        </div>
                    <?php endwhile;  endif;  ?>
                </div>

К ней такой css:

.gallery_page {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  .gallery_post {
    position: relative;
    .rounded(2px);
    overflow: hidden;
    transition: all 300ms ease-in-out;
    margin-bottom: 20px;
    &:hover {
      .mask {
        opacity: 1;
        transition: all 300ms ease-in-out;
      }
    }
    .mask {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(127,66,88,.6);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 300ms ease-in-out;
      .arrow {
        color: #fff;
        width: 70px;
        height: 70px;
        font-size: 20px;
        display: block;
        background: #7F4258;
        line-height: 70px;
        .rounded(50%);
      }
    }
  }
}

Как заставить с помощью flexbox команд последние 2 блока стать в свободное пространство за большой квадратной тумбой??? За ранее всем спасибо!!!

Comments

[MaximYurin]

Рафаэль ™: Так нужно сделать по макету. На флоатах я это реализовал. Теперь хочу реализовать на флексбоксах!

[Rheinmetall]

Код это хорошо, но почему бы не создать страницу где нибудь в песочнице и скинуть ссылку чтоб человек мог перейти и мгновенно начать писать код? Желающих ответить было бы больше, а так многие не хотят даже вникать в эту кашу из вордпресовских функций и css кода

[MaximYurin]

Rheinmetall: Как-то не подумал об этом. Спасибо за совет!

[HamSter]

Никак, используйте масонри сетку

[Сергей delphinpro]

Изучайте https://codepen.io/delphinpro/pen/BWJEgG

[Hyubert]

Сергей: Вау... что за удивительный костиль???

[sergey]

Сергей: супер, взял на вооружение

Answer 1

[Дима]

Не очень понятно куда надо передвинуть церковь и крест. Если они выпадают из потока, то проблема в ширине блоков, а если надо наоборот их выкинуть из него, то тут поможет отдельная обертка для них, с justify-content: space-between