Question

我正在使用space-between在Flexbox中构建列布局，如果有三列，这看起来很棒，但我们的Web应用有时只会输出两列，然后在第二列移动到最右边的。

我想实现一种布局，其中第一列和第三列与它们各自的边距齐平，就像它们现在一样，如果没有第三列，第二列保持在原位。

我尝试了一些不同的东西，手动填充，但没有一个动态足够。

CSS：

.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;
                }
              }
            }
          }
        }
      }
    }
  }
}

HTML：

<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>

演示：CodePen

Answer 1

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

＆＃13;

flex-container {
  display: flex;
  justify-content: space-between;
  border: 1px solid gray;
}

flex-item {
  flex-basis: 20%;
  height: 100px;
  margin: 5px;
  background-color: red;
}

[optional] {
  visibility: hidden; /* toggle off when third column needed */
}

＆＃13;

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item optional></flex-item>
</flex-container>

＆＃13;

jsFiddle

以下是对您遇到的问题的解释：Center and bottom-align flex items

均匀间隔三列和两列布局

1 个答案:

jsFiddle