title: Evenly spacing three- and two-column layouts
body: <p>I'm building a column layout in Flexbox using <code>space-between</code>, which looks great if there are three columns, but our web app will sometimes only output two columns, and then the layout breaks as the second column moves to the far-right.</p>
  
  <p>I'd like to achieve a layout where the first and third columns are flush against their respective margins, as they are now, and where the second column remains in place if there is no third column.</p>
  
  <p>I've tried a few different things, with manual padding, but none worked dynamically enough.</p>
  
  <p>CSS:</p>
  
  <pre><code>.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;
              &gt; h2 {
                font-size: 1.2em;
              }
              .event-perfs-form {
                padding: 15px 0;
                &gt; div {
                  &amp;:not(: last-child) {
                    padding-bottom: 15px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="events-row"&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-img four-three-img"&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/gsnJi.jpg" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="card-info"&gt;
        &lt;h2&gt;Event title&lt;/h2&gt;
        &lt;h3&gt;Event date&lt;/h3&gt;
        &lt;h3&gt;Event venue&lt;/h3&gt;
        &lt;p&gt;
          Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
          &lt;a class="learn-more" href="#"&gt;Learn More &lt;span class="chevron right"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/p&gt;
        &lt;div class="button-cont"&gt;
          &lt;a class="button blue-button" href="#"&gt;Buy Tickets&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-img four-three-img"&gt;
        &lt;a href="#"&gt;&lt;img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-21657-1400066093-5.jpg" /&gt;&lt;/a&gt;
        &lt;div class="series-caption"&gt;Series title&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-info"&gt;
        &lt;h2&gt;Event title&lt;/h2&gt;
        &lt;h3&gt;Event date&lt;/h3&gt;
        &lt;h3&gt;Event venue&lt;/h3&gt;
        &lt;p&gt;
          Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
          &lt;a class="learn-more" href="#"&gt;Learn More &lt;span class="chevron right"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;div class="card-img four-three-img"&gt;
        &lt;a href="#"&gt;&lt;img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-05/enhanced/webdr06/14/7/enhanced-6134-1400067964-1.jpg" /&gt;&lt;/a&gt;
        &lt;div class="series-caption"&gt;Series title&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-info"&gt;
        &lt;h2&gt;Event title&lt;/h2&gt;
        &lt;h3&gt;Event date&lt;/h3&gt;
        &lt;h3&gt;Event venue&lt;/h3&gt;
        &lt;p&gt;
          Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
          &lt;a class="learn-more" href="#"&gt;Learn More &lt;span class="chevron right"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Demo: <a href="http://codepen.io/ourcore/pen/gmYXPY" rel="nofollow noreferrer">CodePen</a></p>