wordpressサイトの記事一覧ページで奇数で記事が終わっている時、記事を真ん中に配置するのではなく、左に配置したい。

Question

■やりたいこと
wordpressサイトの記事一覧ページで奇数で記事が終わっている時、記事を真ん中に配置するのではなく、左に配置したい。
例:
現状：
記事1:左、記事2：右、記事3真ん中
改善：
記事1:左、記事2：右、記事3左
※記事3を記事1と同じ位置にしたい

■問題点
justify-content: ;をいじれば行けそうなのですがspace-aroundを変えると要素自体が真ん中に行かないです。

<section class="tp-magazine">
      <!-- カテゴリーアーカイブ -->
      <?php if (is_category()) : ?>
        <h1 class="tp-h2"><?php echo single_cat_title(); ?></h1>
        <!-- タグアーカイブ -->
      <?php elseif (is_tag()) : ?>
        <h1 class="tp-h2"><?php echo single_tag_title(); ?></h1>
        <!-- 作者アーカイブ -->
      <?php elseif (is_author()) : ?>
        <h1 class="tp-h2"><?php echo esc_attr(get_the_author_meta('nickname')); ?></h1>
        <!-- 日付アーカイブ -->
      <?php elseif (is_month()) : ?>
        <h1 class="tp-h2"><?php echo the_time('Y年n月'); ?></h1>
      <?php endif; ?>

      <div class="tp-magazine__contents">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article class="tp-magazine__article">
              <a href="<?php the_permalink(); ?>" class="tp-magazine__article__link">
                <div class="tp-magazine__article__thumb">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('post-full'); ?>
                  <?php else : ?>
                    <p><img src="http://placehold.jp/24/cc9999/993333/350x150.png" alt=""></p>
                  <?php endif; ?>
                </div>
                <div class="tp-magazine__article__card">
                  <div class="tp-magazine__article__card__info">
                    <div class="tp-magazine__article__card__info__cat cat-health">
                      <?php the_category(); ?>
                    </div>
                    <time class="tp-magazine__article__card__info__data">
                      <?php the_time('Y.m.d'); ?>
                    </time>
                  </div>
                  <h3 class="tp-magazine__article__card__ttl">
                    <?php the_title(); ?>
                  </h3>
                </div>
              </a>
            </article>
        <?php endwhile;
        endif; ?>
      </div>
      <?php if (function_exists("the_pagination")) : ?>
          <?php the_pagination(); ?>
        <?php endif; ?>
    </section>

.tp-magazine {
    width: calc(100% - 340px);
}
.tp-magazine__contents {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 80px;
}

.tp-magazine__article {
    width: 36%;
    max-width: 340px;
}

Answer 1

.tp-magazine__contents {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between; /*space-aroundから変更 */
    margin-top: 80px;
    padding: 0 8%;  /*space-betweenで両端に寄るのでここで調整 */
}

.tp-magazine__article {
    width: 36%;
    max-width: 340px;
}

/* 以下追加  これで最後の要素が左寄せに*/
.tp-magazine__article:nth-child(odd):last-child {
  margin-right: auto;
}

別案

/* 以下追加 */
.tp-magazine__contents::after {
  content: '';
  width: 36%;
  max-width: 340px;
}

after疑似要素に同じ幅を設定する。
偶数の時は、改行されるが高さが0なので影響なし。

Comments

[cafe1111]

ありがとうございます！
解決できました！！