Html 均匀间隔的三列和两列布局

我正在Flexbox中使用之间的

空格构建一个列布局，如果有三列，这看起来很不错，但是我们的web应用程序有时只输出两列，然后当第二列移到最右侧时，布局会中断

我希望实现这样一种布局：第一列和第三列与各自的边距齐平，就像现在一样，如果没有第三列，第二列将保持在原来的位置

我尝试过几种不同的方法，手动填充，但没有一种方法能够足够动态地工作

CSS:

HTML:


活动名称
活动日期
活动地点

例如，在欧盟的适应范围内，我们有一个共同的目标。

系列标题
活动名称
活动日期
活动地点

例如，在欧盟的适应范围内，我们有一个共同的目标。

系列标题
活动名称
活动日期
活动地点

例如，在欧盟的适应范围内，我们有一个共同的目标。


演示：
使用CSS实现该布局的最简单方法是始终保留第三列的空间。换句话说，无论列是否在那里，布局都会在那里看到它


flex容器{
显示器：flex；
证明内容：之间的空间；
边框：1px纯色灰色；
}
弹性项目{
弹性基准：20%；
高度：100px；
保证金：5px；
背景色：红色；
}
[可选]{
可见性：隐藏；/*需要第三列时关闭*/
}
如果在容器上使用伪元素
：：在
之后，它将在渲染或不渲染第三列时工作


body>div{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
边框：1px实心浅灰色；
}
body>div:：之后，
div div{
弹性基础：计算（30%-20px）；
高度：100px；
利润率：10px；
背景色：红色；
}
body>div:：after{
内容：''；
身高：0；
}
分区：第n个孩子（3）{
显示：无；
}

谢谢！我倾向于这个答案，以避免动态插入空元素。我注意到的一点是，如果有三列，它就不起作用。看见你知道我该如何解决这个问题，还是应该在动态添加的类中添加
：属性之后？@MarioParra更新了我的答案。当使用3个或更多时，您需要添加
flex wrap:wrap也适用于该行。。。更新了我的答案。。还有你的密码笔：就是这样。非常感谢！
.events-row {
  display: flex;
  justify-content: space-between;
  .card {
    display: flex;
    flex-direction: column;
    flex-basis: 31.3%;
    position: relative;
    font-size: 1rem;
    .card-img {
      position: relative;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .series-caption {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px 15px;
        width: auto;
        font-size: 1em;
        color: white;
        text-transform: uppercase;
      }
    }
    .card-info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      position: relative;
      padding: 15px;
      background-color: grey;
      text-align: left;
      font-size: 1.2em;
      color: white;
      h1,
      h2 {
        padding-bottom: 0;
      }
      h2 {
        font-size: 1.5em;
        color: black;
      }
      h3 {
        font-size: 1.1em;
        line-height: 1.5;
      }
      p {
        padding: 15px 0;
        font-size: 0.85em;
        a {
          font-size: 1.1em;
        }
      }
      .button-cont {
        margin-top: auto;
        padding: 30px;
        align-self: center;
        .button {
          display: inline-block;
          padding: 10px 30px;
          font-size: 1em;
        }
      }
    }
    .card-flip-cont {
      height: 603.75px;
      .back,
      .front {
        display: flex;
        flex-direction: column;
      }
      .back {
        .card-info {
          padding: 60px 30px 15px;
          overflow: scroll;
          .close-button {
            position: absolute;
            top: 15px;
            right: 15px;
          }
          .event-perfs {
            padding: 30px 0;
            > h2 {
              font-size: 1.2em;
            }
            .event-perfs-form {
              padding: 15px 0;
              > div {
                &:not(: last-child) {
                  padding-bottom: 15px;
                }
              }
            }
          }
        }
      }
    }
  }
}

<div class="events-row">
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#"><img src="http://i.imgur.com/gsnJi.jpg" /></a>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a class="learn-more" href="#">Learn More <span class="chevron right"></span></a>
      </p>
      <div class="button-cont">
        <a class="button blue-button" href="#">Buy Tickets</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a class="learn-more" href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card-img four-three-img">
      <a href="#"><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-6134-1400067964-1.jpg" /></a>
      <div class="series-caption">Series title</div>
    </div>
    <div class="card-info">
      <h2>Event title</h2>
      <h3>Event date</h3>
      <h3>Event venue</h3>
      <p>
        Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
        <a class="learn-more" href="#">Learn More <span class="chevron right"></span></a>
      </p>
    </div>
  </div>
</div>