Question

我有一个容器和几个内部div。

.container {
 display: inline-flex;
 flex-flow: column wrap;
 max-height: 500px;
}
.element {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
}

现在我有3个弹性列。

我的期望：容器的宽度等于列的总和＆＃39;宽度（660px）。

我得到了什么：容器的宽度等于第一列的宽度。

笔： http://codepen.io/korsun/pen/zGpQrZ

为什么呢？当我将flex-direction更改为row并将max-height更改为max-width时，一切都按预期进行。有没有办法让我的容器宽度等于内容宽度？

Answer 1

您的“ .wrap ”容器设置为“内嵌块”。您需要将“ .container ”的容器设置为“阻止”，然后将其定义为包含整体块。
您的“ .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;
}

Flex-flow：柱包装。如何设置容器的宽度等于内容？

1 个答案: