将弹性项目扩展到全宽答案

【问题标题】：Expanding flex items to full width将弹性项目扩展到全宽
【发布时间】：2019-03-04 20:24:45
【问题描述】：

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

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

我正在尝试创建的内容：

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

.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

【问题讨论】：

渲染页面的图像对于那些试图帮助您调试代码的人来说不是很有用。发布相关的 CSS 和 HTML 将使您的问题更有可能得到积极的回应和有用的答案。 idownvotedbecau.se/nocode
您能添加您的代码以便我们为您提供帮助吗？简而言之，我想说 Grid 和 Flexbox 都可以在这里工作，至于 Flexbox 你应该在主 flexbox 父级之外使用它（在那里你有专辑封面作为孩子），至于网格，你需要使用 grid-column此弹出框的样式
@vicodin 感谢您的回复。我附上了一个非常基本的代码笔，希望能证明我的问题。我尝试设置 width: calc(100vw - myMargin) ，它适用于第一项的扩展内容。但是第二个显然会溢出页面。这似乎也很老套。
不客气？感谢您改进您的问题。我已经删除了我的反对票。

标签： html css flexbox grid-layout

【解决方案1】：

如果你想完全保持这种 HTML 结构，并且一次只有一个弹出窗口，这种方法可以帮助你（参见 sn-p）

但我认为重组 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>

【讨论】：

啊，干杯！对解决方案的简单性感到非常尴尬。代码笔是一个基本示例，它实际上是一个 Vue 组件，因此所有这些数据都是动态的。我将根据来自后端的数据循环和安装“专辑”。我将扩展内容作为专辑的一部分的主要原因是它与该特定专辑直接相关，试图将其完全独立地包含在单个专辑中。
好吧，比这个解决方案更适合你 :) 不客气
今晚我又看了一遍。绝对位置非常适合获取全宽扩展内容，但是，我现在注意到专辑容器现在没有考虑扩展内容的高度。这是我必须使用 JS 解决并设置父级的高度，还是有一个 CSS 修复来使父级仍然考虑孩子的高度？
我认为绝对定位将其从文档流中删除是正确的？
是的，它删除了。您可以使用扩展内容高度的值添加底部填充