<分区>
我有一个容器和几个内部 div。
.container {
display: inline-flex;
flex-flow: column wrap;
max-height: 500px;
}
.element {
width: 200px;
height: 200px;
margin: 10px;
background: #000;
}
现在我有 3 个 flex 列。
我的预期: 容器的宽度等于列宽的总和 (660px)。
我得到的: 容器的宽度等于第一列的宽度。
笔: http://codepen.io/korsun/pen/zGpQrZ
为什么？当我将 flex-direction 更改为 row 并将 max-height 更改为 max-width 时，一切都按预期进行。有没有办法让我的容器宽度等于内容宽度？
最佳答案
您的“.wrap”容器设置为“inline-block”。您需要将“.container”的容器设置为“block”，然后定义一个包含整个 block 的容器。
您的“.container”设置为“inline-flex”，当您添加内联时，它会执行与“.wrap”相同的操作元素到图片中。将其设置回“flex”应该可以解决您的问题。
容器内的元素通常应设置为“flex: [number]”和包含宽度。当前的“200”是受限的，不幸的是没有反应。将 max-width 设置为 200 将同时为其提供所需的宽度以及您可以通过媒体查询控制的响应方面。
http://codepen.io/mmcshinsky/pen/bd927e31d2df2f9180a5b7fcf1df2740/
.wrap {
display: block;
max-width: 660px;
}
.container {
display: flex;
flex-flow: column wrap;
max-height: 500px;
}
.element {
max-width: 200px;
height: 200px;
margin: 10px;
background: #000;
flex: 1;
}
关于css - Flex-flow : column wrap. 如何设置容器的宽度等于内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31135650/