CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – Flex-flow:列包装.如何设置容器的宽度等于内容?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > When flexbox items wrap in column mode,container does not grow its width3个
我有一个容器和几个内部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将同时为其提供所需的宽度以及可以使用媒体查询控制的响应方面.

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:列包装.如何设置容器的宽度等于内容?全部内容,希望文章能够帮你解决css – Flex-flow:列包装.如何设置容器的宽度等于内容?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。