拉伸 flexbox 子元素以填充列高

Posted 2023-03-05

【中文标题】拉伸 flexbox 子元素以填充列高

【英文标题】：Stretch flexbox child to fill column height

【发布时间】：2017-06-10 21:59:52

【问题描述】：

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

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

如果有人建议，我无法在 .card 上设置背景颜色，因为我正在实现翻转动画，而卡片无法正常动画。

CSS：

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

结构：

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <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>

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

【问题讨论】：

为什么不直接在卡片元素本身上设置背景呢？

嵌套弹性盒....

@powerbuoy 我在帖子中解释了原因

很抱歉我一定错过了。那么解决方案是将高度设置为100℅

【参考方案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，然后将它们设置为 column，以便视觉上没有任何变化，但将 info 部分的 flex-grow 设置为 1。

【讨论】：

卡片需要在行中，而不是在列中。

它们排成一行。

啊，是的。我在.events-row 上尝试过flex-direction: column，而不是.card。我接受这一点，因为它需要最少的更改。谢谢！

【参考方案2】：

您可以将 嵌套的 flexboxes 设置为 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>

【讨论】：

谢谢！这就是我要找的，但我在你回答之前编辑了我的问题。没有.card-flip-cont 和.front 元素是否可以实现？

【参考方案3】：

可能不理想，但您可以：

.card-flip-cont 
  height:100%;

.front 
  height:100%;
  overflow-y:hidden;

.card-info 
  height:100%;