如何将 flex-container 设置为其 flex-items 的宽度？

Posted 2023-03-06

【中文标题】如何将 flex-container 设置为其 flex-items 的宽度？

【英文标题】：How do I set a flex-container to be the width of its flex-items?

【发布时间】：2014-01-25 21:28:17

【问题描述】：

我有一个带有justify-content: flex-start 的弹性容器。由于弹性项目占用的空间小于容器的大小，最终会在右侧溢出。

除了在 flex-container 上设置明确的宽度，有没有办法只使用 width: auto 来消除溢出？

【问题讨论】：

Flex 盒子非常棘手……在它们真正可靠之前还有很多工作要做。但此链接可以提供帮助：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

嗯...你能show a demonstration吗？

您说的是“溢出”和“更少空间”，但您可能是指“下溢”和“更少空间”或“溢出”和“更多空间”。澄清你的问题

这个有什么答案吗？？？我创建了一个小提琴来演示我面临的类似问题：jsfiddle.net/fxz6o726

在过去，我已经看到使用 flex-basis: auto 完成此操作，但似乎我们处于 Blink 准备添加 flex-basis: content 的过渡状态，这应该完全完成您的操作'正在要求。

【参考方案1】：

这个在同一个 inline-flex（或 flex）元素上对我有用：

   width: fit-content;

【讨论】：

宽度没有这样的属性。

@KonradGałęzowski 请查看此 Caniuse 页面：caniuse.com/?search=width%3A%20fit-content%3B

【参考方案2】：

width: min-content（CSS3“内在”而不是“外在”）

display: inline-flex如果你不在乎它是否内联

如果您在段落上使用width: min-content，则最长的单词决定宽度。

.flex-container 
  display: flex;


.flex-inline-container 
  display: inline-flex;


.width-min-content 
  width: min-content;


.row-direction 
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 
.col-direction 
  flex-direction: column;
  border: 0.0625rem solid magenta;

flex
<div class='flex-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
flex width: min-content
<div class='flex-container width-min-content row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container width-min-content col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
inline-flex
<div class='flex-inline-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>

<div class='flex-inline-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>

【参考方案3】：

按照 Mahks 的建议，您可以make the flex container inline。但如果内联放置不适合您的布局，另一种方法是浮动 flex 容器（而不是 flex 项）。

Floats 将收缩包装以适应其内容，这对于块级弹性容器没有什么不同。内联级 flex 容器在其父内联格式上下文中布局时的行为类似于 inline-block box，这意味着默认情况下它也会缩小以适应其内容。

【讨论】：

如果您支持旧版 Firefox 浏览器，使用浮点数会导致 Bad Things (tm) 发生（请参阅：bugzilla.mozilla.org/show_bug.cgi?id=660699）

【参考方案4】：

如果您的意思是希望容器成为项目的宽度，而不是项目扩展到容器宽度...

您可以通过将display:flex 更改为display:inline-flex 来获得它

【讨论】：

inline-flex 对我没有帮助，实际上，应该吗？那不是不可能吗？就像当你为容器设置inline-block 和为里面的块项目设置width: 100% 时，容器不会调整到它的max-width，而是容器和项目将保持最小可能的宽度。对 flexbox 来说不是类似吗？

display:inline-flex 在我的案例中解决了类似的问题

在我的情况下工作完美。只是需要额外的 min-

【参考方案5】：

不确定您的问题，但是：

演示：http://jsfiddle.net/jn45P/

您只需要启用弹性项目的灵活性，使用flex-grow:1; 来填充空间

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o

    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;


div.o > div
    border:2px red solid;margin:2px;

div.o.flex > div
    flex:1 1 auto; /* enable flexibility on the flex-items */

【讨论】：

调整项目大小以适应容器，而不是相反。