Flex流：列包装。如何设置容器的宽度等于内容？ [英] Flex-flow: column wrap. How to set container's width equal to content?

问题描述

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

I have a container and several inner divs.

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

现在我有3个flex列。

Now I have 3 flex columns.

我的期望：
容器的宽度等于列宽度（660像素）的总和。

What I expected: Container's width becomes equal to the sum of columns' width (660px).

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

What I got: Container's width becomes equal to the first column's width.

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

为什么？当我将flex-direction改为row，max-height改为max-width时，一切都正常。有没有办法使我的容器宽度等于内容宽度？

Why? When I change flex-direction to row and max-height to max-width everything goes just as expected. Is there a way to make my container's width equal to content width?

推荐答案

1. .wrap 容器设置为 inline-block 。您将需要将 .container 的容器设置为阻止，然后将其定义为包含整个块。

1. Your ".wrap" container is set to "inline-block". You will want the container of ".container" to be set to "block" and then a defined with to contain the blocks overall.

您的 .container 设置为 inline-flex ，当您将内嵌元素添加到图片。将此设置为 flex 应该可以解决您的问题。

Your ".container" is set to "inline-flex" which is then doing the same thing as ".wrap" when you add the inline element into the picture. Setting this back to "flex" should fix your problem.

容器中的元素通常设置为 flex：[number] 和一个包含宽度。具有200的电流是约束性的，并且不幸地没有反应。将最大宽度设置为200，即可将其所需的宽度加上您可以通过媒体查询控制的响应方面。

Your elements inside the container should typically set to "flex: [number]" and a containing width. The current with of "200" is constraining and unfortunately unresponsive. Setting a max-width of 200 will both give it the width desired plus the responsive aspect which you can control with media queries.

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流：列包装。如何设置容器的宽度等于内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！