我有一个Flex容器justify-content: flex-start
。由于弹性项目占用的空间少于容器的大小,因此最终会在右侧溢出。
除了在flex容器上设置显式宽度外,还有没有其他方法可以等效width: auto
地消除溢出?
我有一个Flex容器justify-content: flex-start
。由于弹性项目占用的空间少于容器的大小,因此最终会在右侧溢出。
除了在flex容器上设置显式宽度外,还有没有其他方法可以等效width: auto
地消除溢出?
flex-basis: auto
,但似乎我们处于过渡状态,其中Blink正在准备添加flex-basis: content
,这应该可以完全满足您的要求。
Answers:
如果您是说要让容器成为项目的宽度,而不是将项目扩展到容器的宽度...
您可能可以通过更改display:flex
为display:inline-flex
inline-flex
对我的情况没有帮助,实际上应该吗?那不是不可能吗?就像您inline-block
为容器和width: 100%
内部的块项目设置时一样,容器不会调整为其大小,max-width
而是容器和项目将以最小的宽度保留。它对于flexbox不会起作用吗?
display:inline-flex
解决了我的情况下,类似的问题
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>
不确定您的问题,但:
演示: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 */