Question

我在flexbox容器中有三个div。

我希望三个divs显示如下：

+-----------------------------------------------+
|     +-----------------+-----------------+     |
|     |                 |                 |     |
|     |                 |                 |     |
|     +-----------------+-----------------+     |
|                                               |
|     +-----------------------------------+     |
|     |                                   |     |
|     |                                   |     |
|     +-----------------------------------+     |
|                                               |
+-----------------------------------------------+

因此容器必须垂直适应其内容，但仅限于其内容，而不是更多。

我在divs之间获得了很大的空白，但是容器正在获得其父级height的100％。

我试过没有将height属性放到容器中并设置height: auto;但是它们都没有工作。

这是我的代码：

＆＃13;

*{
   box-sizing: border-box;
}

html,body{
   width: 100%;
   margin: 0;
}

#container{
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 450px;
	border: 1px solid;
}

#div1{
	width: 50%;
	height: 155px;
	background-color: blue;
}

#div2{
    width: 50%;
    height: 155px;  
    background-color: red;
}

#div3{
    width: 70%;
    height: 155px;
    background-color: green;
}

＆＃13;

<div id="container">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

＆＃13;

注意：将其放大以查看div之间的空白区域。

如何让容器收缩包装内容而不是其父级的100％高度？

提前致谢！

Answer 1

创建弹性容器时，初始设置为align-content: stretch。

这会导致多行flex项目在容器的整个长度上分布。

在align-content: flex-start上使用#container覆盖此设置。

要使#container垂直收缩包装其内容，您需要删除此规则：

#container { bottom: 0; }

因为#container是绝对定位的，并且没有定位的父元素，这将为#container建立包含块，所以默认包含块将成为包含 的初始值阻止 或视口。

这就是容器从上到下伸展的原因，如您应用的黑色边框所示。移除bottom: 0后，容器的行为将更像height: auto。

在此处详细了解CSS定位：https://developer.mozilla.org/en-US/docs/Web/CSS/position

如何使用flexbox垂直包装内容？

1 个答案: