Styling Posts Archive dynamically using Flexbox

user_10028611 0
Viewed 40

I'm trying to find the best way to style my columns. If there are 4 posts then it works as hoped. But if a row has less than 4, there is additional space between each post. I know this is possible with floats but I'm hoping there is a more modern solution to this, ideally using flexbox. This is how it is currently set up. The second row is spaced differently than the first row.This is how it is currently set up. The second row is spaced differently than the first row

This is the desired layout with all columns in line with each other

Picture 2 Is the desired layout.

PHP

<div class="news-results">
  <div class="container">
    <!-- Each News Preview Card -->
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="<?php echo $preview_image['url']; ?>" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3><?php echo $title; ?></h3>
        <p><?php echo $excerpt; ?></p>
        <p><?php echo $date; ?></p>
      </div>
    </a>
  </div>
</div>

SCSS

.news-results {
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .news-card {
      width: calc(25% - 20px);
      .image-background,
      .color-background {
        height: 215px;
        width: auto;
        margin-bottom: 15px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .news-contents {
        h3, p {
          color: $black;
        }
      }
    }
  }
}

EDIT Also, I need the posts to fill .container div so margin-right on all of them would not work. See img:enter image description here Thanks for your help!! :D

flexbox sass css html php
1 Answers

You definitely don't want to use justify-content: space-between;, because that is what is causing the content to be equally space when there aren't 4 flex items. You can try something like this where the flex parent has flex-wrap: wrap; and each flex-item has a calculated width with some sort of spacing.

This way, each column will take up roughly 25% all the time, unless instructed otherwise by a media style for example.

.container {
  display: flex;
  flex-wrap: wrap;
}

a.news-card {
  width: calc(100%/4);
  text-align: center;
}

img {
  max-width: 100%;
}

@media only screen and (max-width: 700px) {
  a.news-card {
    width: calc(100%/2);
  }
}

@media only screen and (max-width: 500px) {
  a.news-card {
    width: calc(100%/1);
  }
}
<div class="news-results">
  <div class="container">
    <!-- Each News Preview Card -->
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
    <a href="<?php echo $link; ?>" class="news-card">
      <div class="image-background">
        <img src="https://dummyimage.com/200/000/fff" alt="<?php echo $preview_image['alt']; ?>">
      </div>
      <div class="news-contents">
        <h3>Title</h3>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur eum</p>
        <p>Date</p>
      </div>
    </a>
  </div>
</div>

user_164963570
Related