Ich habe einen Flexcontainer mit justify-content: flex-start. Auf der rechten Seite kommt es zu einem Überlauf, da die flexiblen Elemente weniger Platz beanspruchen als die Größe des Behälters.
Gibt es neben der Einstellung einer expliziten Breite für den Flex-Container eine Möglichkeit, nur das Äquivalent width: autozu haben, um den Überlauf zu entfernen?
flex-basis: auto, aber es scheint, dass wir uns in einem Übergangszustand befinden, in dem sich Blink auf das Hinzufügen vorbereitet flex-basis: content, was genau das erreichen sollte, was Sie verlangen.
Antworten:
Wenn Sie meinen, dass der Container die Breite der Elemente haben soll, anstatt dass die Elemente auf die Containerbreite erweitert werden ...
Sie können in der Lage sein , das zu bekommen , indem display:flexaufdisplay:inline-flex
inline-flexhilft in meinem Fall nicht und sollte es auch? Ist das nicht unmöglich? Wie beim Festlegen inline-blockvon Containern und width: 100%Blockelementen im Inneren wird die Größe des Containers nicht auf seine Größe geändert, max-widthsondern Container und Elemente bleiben bei minimal möglichen Breiten. Würde es bei Flexbox nicht ähnlich funktionieren?
display:inline-flexlöste ein ähnliches Problem in meinem Fall
width: min-content (CSS3 "intrinsisch" im Gegensatz zu "extrinsisch")
display: inline-flex wenn es dir egal ist, ob es inline ist
Wenn Sie width: min-contenteinen Absatz verwenden, bestimmt das längste Wort die Breite.
.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>Wie von Mahks vorgeschlagen, können Sie den Flex-Container inline machen . Wenn das Inline-Verlegen jedoch nicht für Ihr Layout geeignet ist, besteht eine Alternative darin, den Flex-Container (nicht die Flex-Elemente) zu schweben.
Floats werden in Schrumpffolie verpackt, um ihrem Inhalt zu entsprechen. Dies gilt nicht für einen Flex-Container auf Blockebene. Ein Flex-Container auf Inline-Ebene verhält sich ähnlich wie ein Inline-Block-Feld, wenn er im übergeordneten Inline-Formatierungskontext angeordnet ist. Dies bedeutet, dass er standardmäßig auch verkleinert wird, um seinem Inhalt zu entsprechen.
Ich bin mir nicht sicher über deine Frage, aber:
DEMO : http://jsfiddle.net/jn45P/
Sie müssen nur die Flexibilität der Flex-Elemente aktivieren flex-grow:1;, um den Raum auszufüllen
<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 */
Dieser arbeitete für mich an demselben Inline-Flex- (oder Flex-) Element:
width: fit-content;