Question

我正在构建一个包含卡片的flexbox三列布局，并且所有卡片的高度相同（检查.card），但从视觉上看，它们不是{{1}元素的高度不同，并具有背景颜色。

我正在寻找一种方法来自动拉伸.card-info的高度，以便在.card-info内填充其下方的剩余空间。

如果有人提出建议，我无法在.card上设置背景颜色，因为我正在实施翻转动画，并且卡片没有正确设置动画。

CSS：

.card

结构：

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

演示：http://codepen.io/ourcore/pen/xgLyMW

Answer 1

您只需在CSS中添加3行：

.card {
        flex-basis: 31.3%;
        position: relative;
        display: flex;
        flex-direction: column;


        .card-info {
            padding: 15px;
            background-color: grey;
            text-align: left;
            font-size: 1rem;
            color: white;
            flex-grow: 1;

使卡片本身弯曲，然后将它们设置为列，这样看不到任何变化，但将信息部分的flex-grow设置为1。

Answer 2

您可以将嵌套的flexbox 设为front并将其设为列 flexbox，然后您可以将flex: 1添加到card-info元素：

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}

添加以下样式后，请参阅下面的演示：

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-row .card .card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  width: auto;
  font-size: 1em;
  color: white;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info h1,
.events-row .card .card-info h2 {
  padding-bottom: 0;
}
.events-row .card .card-info h2 {
  font-size: 1.75em;
  color: black;
}
.events-row .card .card-info h3 {
  font-size: 1.1em;
  line-height: 1.5;
}
.events-row .card .card-info p {
  padding: 15px 0;
}
.events-row .card .card-info p a {
  font-size: 1.1em;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

/*NEW STYLES*/

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></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.
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></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.
            </p>
            <div class="button-cont">
              <div class="button purple-button">Buy Tickets</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

可能不理想，但你可以：

.card-flip-cont {
  height:100%;
}
.front {
  height:100%;
  overflow-y:hidden;
}
.card-info {
  height:100%;
}

拉伸flexbox子项填充列高

3 个答案: