使用 flexbox，如何覆盖图像并展开以填充父容器答案

【问题标题】：Using flexbox, how to overlay an image and expand to fill parent container使用 flexbox，如何覆盖图像并展开以填充父容器
【发布时间】：2020-05-08 00:48:47
【问题描述】：

在下面的 html 中，我希望 txt-box div 在容器中居中，覆盖图像，然后展开以填充容器。它应该在所有边上都有一个等宽的边距，允许图像的一部分显示为粗边框。

显示的 html 可以满足我的需要，只是随着浏览器窗口大小的调整，垂直边距与水平边距总是略有不同。

我觉得我这里有一个 hack，我错误地使用了flex-grow。我了解flex-grow 允许txt-box div 扩展，因为它是唯一具有增长值的元素。如果我能解决这个问题，我应该能够简单地在txt-box 上设置一个边距，它应该可以工作。

我对@987654326@ 有什么不明白的地方？

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px red;
  position: relative;
}

.container img {
  width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}

.txt-box {
  background-color: white;
  display: flex;
  padding: 5px;
  border: solid 2px blue;
  flex-grow: 1;
  position: absolute;
  width: 90%;
  height: 80%;
}

<div class="container">
  <img src="blocks.png" />
  <div class="txt-box">
    hello world
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

感谢迈克尔·本杰明让我走上启蒙之路。我终于弄明白了。我最初的问题实际上是我试图完成的一部分。答案是使用background-image:url('...') 并确保表格和行元素为display:flex。

JSFiddle

<html>
<head>
    <style>

        .flex-table {
            flex-flow:column;
        }

        .flex-row {
            flex-flow:row;
        }

        .container {
            align-items: center;
            justify-content: center;
            padding: 20px;
            border: solid 2px red;
            background-image:url('https://i.imgur.com/BF3ty6o.jpg');
            background-size:cover;
            background-repeat:no-repeat;
            max-width:500px;
        }

        .txt-box {
            justify-self:stretch;
            align-self:stretch;
            border: solid 2px blue;
            background-color: rgba(192,192,192,0.5);
        }


        body, .flex-table, .flex-row, .container, .txt-box  {
            display:flex;
            flex-grow:1;
        }

        @media (max-width: 768px) {
            .flex-row {
                flex-flow:column;
            }
        }

    </style>

</head>
<body>

<div class="flex-table">
    <div class="flex-row">
        <div class="container">
            <div class="txt-box">
                hello world 1
            </div>
        </div>

        <div class="container">
            <div class="txt-box">
                hello world 2
            </div>
        </div>

        <div class="container">
            <div class="txt-box">
                hello world 3
            </div>
        </div>
    </div>


    <div class="flex-row">
        <div class="container">
            <div class="txt-box">
                hello world 4
            </div>
        </div>

        <div class="container">
            <div class="txt-box">
                hello world 5
            </div>
        </div>

        <div class="container">
            <div class="txt-box">
                hello world 6
            </div>
        </div>
    </div>
</div>
</body>

</html>

【讨论】：

【解决方案2】：

我对@987654323@ 有什么不理解的地方？

Flex 属性不适用于 flex 容器的绝对定位子项。

§ 4.1. Absolutely-Positioned Flex Children

由于它是外流的，因此是 flex 的绝对定位子代容器不参与弹性布局。

因此，txt-box 上的 flex-grow: 1 没有做任何事情。它只是被忽略了。

考虑到您希望图像只是放在背景中，而文本框有更多要求，我建议绝对定位图像并让文本框保持正常流动。

然后为文本框提供完整的宽度和高度，并在主容器上使用相等的填充以保持跨屏幕尺寸的统一“边距”。

这是一个演示，其中包含一些额外的功能来帮助说明所涉及的概念。

 body {
   height: 100vh;   
   display: flex;
   margin: 0;
   padding: 10px;
 }
 
 .container {
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   position: relative;
   border: solid 2px red;
 }
 
 img {
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: contain; /* also try 'cover' for demo */
 }

 .txt-box {
   z-index: 1;
   width: 100%;
   height: 100%;
   border: solid 2px blue;
   background-color: rgba(192,192,192,0.5);
 }
  
 * {
   box-sizing: border-box;
 }

<div class="container">
  <img src="http://i.imgur.com/60PVLis.png">
  <div class="txt-box">hello world</div>
</div>

jsFiddle demo

【讨论】：

感谢 Michael 让我直接了解 flex-grow。我真的想要一个更像 flexbox 的答案，因为容器元素实际上是表格中需要响应的单元格。使用您的答案，我能够朝着正确的方向前进。