Question

我正在尝试使我的内容包装器card__header与flex一起成长。要占用剩余的高度，因此card__cta始终位于底部，所有3个位置都与容器的高度成一直线。

我的尝试是使用：

.card__content-wrapper {
    display: flex;
    flex-direction: column;
}

这不会使包装器延伸到列的整个高度。我认为，在CTA进入列底部之前，我需要先进行排序。

演示网址： http://1514531d.ngrok.io/testing123/columndev/

.events-grid__grid {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.events-grid__card {
  -ms-flex: 0 0 33.33333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.card__wrapper {
  height: 100%;
  padding: 0;
}

.card__content-wrapper {
  padding: 15px 0 0;
}

.card__header {}

<div class="events-grid__grid">
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2018/01/fav-homepage.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2015/04/image2.jpg"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2016/09/saturdays-box.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <p></p>
</div>

Answer 1

添加display: flex;和flex-direction: column;将使您接近，但还需要进行一些更改：

.card__content-wrapper需要一个高度，否则其子代将没有空间成长。为此，您需要将display: flex;和flex-direction: column;添加到.card__wrapper，将flex-grow: 1;添加到.card__content-wrapper
.card__header将需要flex-grow: 1;使其占用备用空间并将.card__cta推到底部

.events-grid__grid {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.events-grid__card {
  -ms-flex: 0 0 33.33333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.card__wrapper {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.card__content-wrapper {
  padding: 15px 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__header {
  flex-grow: 1;
}

<div class="events-grid__grid">
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2018/01/fav-homepage.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2015/04/image2.jpg"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2016/09/saturdays-box.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <p></p>
</div>

列内容包装器不随Flex一起增长

1 个答案: