将弹性项目扩展到全宽

Question

我正在尝试创建自定义 'iTunes' 样式的展开式布局。但是，我遇到了一些问题。我原本预计为此使用 flex-box 。但我似乎不能做我想做的事。

我附上了我要创建的图像。本质上是一个可点击的缩略图网格，其中包含全宽的扩展内容。全宽方面是我正在努力解决的问题。我是否必须在展开的内容上设置一个明确的宽度，或者内容是否可以弯曲到全宽？

我要创建的内容：

我附上了一个非常基本的代码笔来演示我遇到的问题。如果第一张图片是 'expanded'，我希望它是全宽的。

.album-container {
  display: flex;
  flex-direction: row;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
}

<div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    <div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
  </album>
</div>

https://codepen.io/jakefauvel/pen/QoKdJP

Answer 1

如果您想完全保持这种 HTML 结构，并且一次只有一个弹出窗口，这种方法可以帮助您（参见代码片段）

但我认为重构 HTML 代码会更好更清晰，例如，将 .expanded-content 从 .album-container 移出并更改其内容为 JavaScript如果可能的话。

.album-container {
  display: flex;
  flex-direction: row;
  position: relative;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
  
  position: absolute;
  left: 0;
  width: 100%;
}

<div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
<div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
</div>

将弹性项目扩展到全宽

Expanding flex items to full width

html

css

grid-layout

flexbox