Question

我有一个justify-content: flex-start的弹性容器。由于柔性物品占用的空间小于容器的尺寸，因此最终会在右侧溢出。

除了在flex-container上设置显式宽度之外，还有一种方法可以使用等效的width: auto来删除溢出吗？

Answer 1

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

您可以通过将display:flex更改为display:inline-flex

来实现这一目标

Answer 2

这个在同一个inline-flex（或flex）元素上为我工作：

   width: fit-content;

Answer 3

不确定你的问题，但是：

DEMO ：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 */

Answer 4

根据Mahks的建议，你可以make the flex container inline。但是如果将其内联放置不适合您的布局，则可以选择浮动Flex容器（而不是flex项目）。

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

Answer 5

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>

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

5 个答案: