参见英文答案 >
When flexbox items wrap in column mode,container does not grow its width3个
我有一个容器和几个内部div.
我有一个容器和几个内部div.
.container {
display: inline-flex;
flex-flow: column wrap;
max-height: 500px;
}
.element {
width: 200px;
height: 200px;
margin: 10px;
background: #000;
}
现在我有3个弹性柱.
我的期望：
容器的宽度等于列宽(660px)的总和.
我得到了什么：
容器的宽度等于第一列的宽度.
钢笔：
http://codepen.io/korsun/pen/zGpQrZ
为什么？当我将flex-direction更改为row并将max-height更改为max-width时,一切都按预期进行.有没有办法让我的容器宽度等于内容宽度？
解决方法
>您的“.wrap”容器设置为“inline-block”.您将希望将“.container”的容器设置为“block”,然后将其定义为包含整体块.
>您的“.container”设置为“inline-flex”,然后在将内联元素添加到图片中时执行与“.wrap”相同的操作.将其设置回“flex”应该可以解决您的问题.
>容器内的元素通常应设置为“flex：[number]”和包含宽度.目前的“200”是有限的,不幸的是没有反应.将最大宽度设置为200将同时为其提供所需的宽度以及可以使用媒体查询控制的响应方面.
>您的“.container”设置为“inline-flex”,然后在将内联元素添加到图片中时执行与“.wrap”相同的操作.将其设置回“flex”应该可以解决您的问题.
>容器内的元素通常应设置为“flex：[number]”和包含宽度.目前的“200”是有限的,不幸的是没有反应.将最大宽度设置为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;
}
