如何将flex容器设置为其flex-items的宽度?


75

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

除了在flex容器上设置显式宽度外,还有没有其他方法可以等效width: auto地消除溢出?


Flex Box确实很棘手……在实际可靠之前,它们还有很多工作要做。但这个链接可以帮助:developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
BuddhistBeast

嗯...你能示范一下吗?
路人2014年

您所说的是“溢出”和“更少的空间”,但您可能指的是“下溢”和“更少的空间”或“溢出”和“更多的空间”。阐明您的问题

2
任何答案呢???我创建了一个小提琴来演示我所面临的类似问题:jsfiddle.net/fxz6o726
amit

过去,我已经看到可以通过完成此操作flex-basis: auto,但似乎我们处于过渡状态,其中Blink正在准备添加flex-basis: content,这应该可以完全满足您的要求。
凯尔(Kyle)2016年

Answers:


82

如果您是说要让容器成为项目的宽度,而不是将项目扩展到容器的宽度...

您可能可以通过更改display:flexdisplay:inline-flex


4
inline-flex对我的情况没有帮助,实际上应该吗?那不是不可能吗?就像您inline-block为容器和width: 100%内部的块项目设置时一样,容器不会调整为其大小,max-width而是容器和项目将以最小的宽度保留。它对于flexbox不会起作用吗?
Senthe

2
display:inline-flex解决了我的情况下,类似的问题
乔治Tempesta

在我的情况下工作完美。只是需要额外的最小宽度=“ 100%”
Alex Vovchuk

10
  1. width: min-content (相对于“外部”,CSS3是“内部”)

  2. 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的建议,您可以将flex容器设置为inline。但是,如果以内联方式放置它不适合您的布局,则另一种方法是浮动flex容器(不是flex项)。

浮点将收缩包装以适合其内容,这对于块级flex容器也没有什么不同。在其父级内联格式设置上下文进行布局时,内联级flex容器的行为与内联块框类似,这意味着默认情况下,它也将缩小以适合其内容。


如果您支持较旧的Firefox浏览器,则使用浮动
控件


1

不确定您的问题,但:

演示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 */

3
这样可以调整项目的大小以适合容器,而不是相反。
BoltClock
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.