html - 由于图像大小，两个 flex 的子 div 不会均分空间

Question

我有一个显示设置为 flex 的父容器。里面有两个 div 都设置了 flex:1 但我的第一个子 div 里面有一个图像，占用的空间是第二个 div 的两倍。

如果屏幕的高度是 1000 像素，那么每个屏幕不应该覆盖 500 个高度吗？

当我的 flex-direction 是 'row' 时，这很好用，但是对于 'column'，你有一个无限的垂直空间，所以 div 可以根据需要占据尽可能多的高度。

我希望两个子 div 都覆盖可见的剩余屏幕高度，而不是垂直扩展其父容器的高度。

#info-container {
  margin: 0 auto;
  margin-top: 5%;
  text-shadow: 0 2px 2px #000;
  display: flex;
  flex-direction: column;
}

#info-container .cover {
  text-align: center;
  flex: 1;
}

#info-container .cover img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2%;
  box-shadow: 0px 0px 5px #000;
  max-width: 100%;
}

#info-container .song-info {
  align-self: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  flex: 1;
}

#info-container .song-info h4 {
  margin-top: 10px;
  font-weight: 100;
  // text-decoration: underline;
  padding-bottom: 5px;
  border-bottom: 1px solid white;
  width: 100%;
}

// suggested songs
.suggested-songs {
  margin-top: 5%;
}

<div id="info-container">
  <div class="cover"><img class='cover-photo' src='https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' alt="cover">
  </div>
  <div class="song-info">
    <h4>Test : <span class="song-name"> Test</span>
    </h4>
    <h4>Test : <span class="artist">Test</span></h4>
    <h4>Duration : <span class="duration">3:26</span></h4>
  </div>
</div>

代码笔:https://codepen.io/AfaqQazi/pen/QWLaybo?editors=1100

Answer 1

flex 属性只设置 FlexBox 元素的最小高度。由于您的图像标签比文本内容高，因此它使第一个 div 更高。如果你想平衡 div，你有两个选择。

首先:为 img 标签设置最大高度:

#info-container {
  margin: 0 auto;
  /*margin-top: 5%;*/
  text-shadow: 0 2px 2px #000;
  display: flex;
  flex-direction: column;
}

#info-container .cover {
  text-align: center;
  flex: 1;
}

#info-container .cover img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2%;
  box-shadow: 0px 0px 5px #000;
  max-width: 100%;
  max-height: 200px;
}

#info-container .song-info {
  align-self: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  flex: 1;
}

#info-container .song-info h4 {
  margin-top: 10px;
  font-weight: 100;
  // text-decoration: underline;
  padding-bottom: 5px;
  border-bottom: 1px solid white;
  width: 100%;
}

// suggested songs
.suggested-songs {
  margin-top: 5%;
}

<div id="info-container">
  <div class="cover">
    <img class='cover-photo' src='https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' alt="cover">
  </div>
  <div class="song-info">
    <h4>Test : <span class="song-name"> Test</span></h4>
    <h4>Test : <span class="artist">Test</span></h4>
    <h4>Duration : <span class="duration">3:26</span></h4>
  </div>
</div>

第二:将图片设为背景图片，为其设置最小高度，并将其所有父元素设置为100%高度:

html, body, #info-container{
   height: 100%;
}

#info-container {
  margin: 0 auto;
  /*margin-top: 5%;*/
  text-shadow: 0 2px 2px #000;
  display: flex;
  flex-direction: column;
}

#info-container .cover {
  text-align: center;
  flex: 1;
  background: url(https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80) center/cover;
  min-height: 300px;
}

/*#info-container .cover img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2%;
  box-shadow: 0px 0px 5px #000;
  max-width: 100%;
}*/

#info-container .song-info {
  align-self: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  flex: 1;
}

#info-container .song-info h4 {
  margin-top: 10px;
  font-weight: 100;
  // text-decoration: underline;
  padding-bottom: 5px;
  border-bottom: 1px solid white;
  width: 100%;
}

// suggested songs
.suggested-songs {
  margin-top: 5%;
}

<div id="info-container">
  <div class="cover">
    <!--<img class='cover-photo' src='https://images.unsplash.com/photo-1523895665936-7bfe172b757d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80' alt="cover">-->
  </div>
  <div class="song-info">
    <h4>Test : <span class="song-name"> Test</span></h4>
    <h4>Test : <span class="artist">Test</span></h4>
    <h4>Duration : <span class="duration">3:26</span></h4>
  </div>
</div>