如何使用flexbox垂直包装内容? [英] How to vertically wrap content with flexbox?

问题描述

我在flexbox容器中有三个div.

I have three divs inside a flexbox container.

我希望三个divs显示如下:

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

因此容器将不得不垂直适应其内容，而仅适应其内容，而不是更多.

so the container will have to adapt vertically to its content but only to its content, not more than that.

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

I am getting big white spaces between the divs and the container is getting the 100% of the height of its parent, though.

我尝试不将height属性放入容器并设置height: auto;，但是它们都不起作用.

I tried without putting height property to the container and setting height: auto; but neither of them worked.

这是我的代码:

*{
   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;
}

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

注意:加大它以查看div之间的空白.

Note: Make it bigger to see the white spaces between the divs.

如何使容器收缩包装而不是其父容器的100％高?

How can I make the container shrink-wrap the content and not be 100% height of its parent?

提前谢谢！

推荐答案

创建Flex容器时，初始设置为align-content: stretch.

When you create a flex container, an initial setting is align-content: stretch.

这会导致多行弹性项目在容器的整个长度上分布自己.

This causes multiple lines of flex items to distribute themselves across the full length of the container.

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

要使#container的内容垂直收缩包装，您需要删除以下规则:

To make the #container shrink-wrap its contents vertically, you need to remove this rule:

#container { bottom: 0; }

因为#container的位置是绝对的，并且没有父元素的位置，所以将为#container建立包含块，因此默认的包含块将成为 初始包含块 或视口.

Because #container is absolutely positioned, and there is no parent element that is positioned, which would establish the containing block for #container, the default containing block becomes the initial containing block or, the viewport.

这就是为什么容器从顶部延伸到底部的原因，如您所应用的黑色边框所示.删除bottom: 0后，容器的行为将类似于height: auto.

That's why the container is stretching from top to bottom, as illustrated by the black border you applied. Once your remove bottom: 0 the container will act more like height: auto.

在此处了解有关CSS定位的更多信息: https://developer.mozilla .org/zh-CN/docs/Web/CSS/position

Learn more about CSS positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

这篇关于如何使用flexbox垂直包装内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！