Als «flexbox» getaggte Fragen

CSS-Modul für flexible Layouts, das eine breite Palette von Optionen zum Ausrichten von Elementen bietet und gleichzeitig Floats und Tabellen überflüssig macht.

10
Reihen gleicher Höhe in einem Flexbehälter
Wie Sie sehen können, haben die list-itemsin der ersten rowgleich height. Aber die Elemente in der zweiten rowhaben andere heights. Ich möchte, dass alle Gegenstände eine Uniform haben height. Gibt es eine Möglichkeit, dies ohne feste Höhe und nur mit Flexbox zu erreichen ? Hier ist mein code .list { …
90 html  css  flexbox 
1
Rand oben nur, wenn das Flex-Element eingewickelt ist
Ich habe einen Flex-Container mit zwei Flex-Artikeln. Ich möchte einen Rand oben auf den zweiten setzen, aber nur, wenn er gewickelt ist und nicht an der ersten Flexlinie. Wenn möglich, möchte ich die Verwendung von Medienabfragen vermeiden. Ich dachte, der untere Rand des ersten Elements könnte eine Lösung sein. Es …
87 css  margin  flexbox 
3
CSS3 Flexbox: Anzeige: Box vs. Flexbox vs. Flex
Gestern habe ich in der Schule eine Website bekommen, die die CSS 3 Flexbox-Anweisung verwendet. Das habe ich noch nie benutzt. Also habe ich ein bisschen gegoogelt und viele verschiedene Stile der Flexbox-Anweisungen gefunden. Einige Leute schreiben display: box;, andere benutzen display: flexbox;und andere display: flex;. Was sind die Unterschiede? …
83 css  flexbox 
2
Flexbox-Code funktioniert in allen Browsern außer Safari. Warum?
Rasterspalten mit Listen-Tags müssen alle 3 Spalten in der richtigen Reihenfolge angezeigt werden, wobei die automatische Breite für jedes zusätzliche HTML-Listenelement aktiviert ist. Dies ist mein Beispiel: <style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; …
78 html  css  flexbox 
1
Firefox-Überlauf funktioniert nicht mit verschachtelter Flexbox
Ich habe ein Layout mit 100% Breite und 100% Höhe mit CSS3-Flexbox entworfen, das sowohl auf IE11 als auch wahrscheinlich auf IE10 funktioniert, wenn die Emulation von IE11 korrekt ist. Aber Firefox (35.0.1), Überlauf-y funktioniert nicht. Wie Sie in diesem Codepen sehen können: http://codepen.io/anon/pen/NPYVga Firefox rendert den Überlauf nicht korrekt. …
7
Breite bei Flexbox-Elementen ignoriert
http://jsfiddle.net/XW9Se/ Ich habe width: 200px;links eingestellt, <div>aber wenn ich es mit dem Browser-Inspektor-Tool ansehe, scheint die tatsächliche Breite zufällig zu sein oder so. Es ändert sich ständig je nach Fenstergröße. Warum wird die Breite nicht wirksam? BEARBEITEN : Wenn ich entferne, width: 100%bleibt die Breite fest. Aber ich brauche das, …
76 css  width  flexbox 
7
Verhindern Sie, dass flexible Gegenstände über einen Behälter laufen
Wie erstelle ich mein Flex-Element ( articlein diesem Beispiel), das das Flex-Element / den Flex-Container ( ) flex-grow: 1; nicht überlaufen muss main? In diesem Beispiel articlehandelt es sich nur um Text, obwohl er möglicherweise andere Elemente ( tables usw.) enthält. main, aside, article { margin: 10px; border: solid 1px …
75 css  flexbox 
4
Polsterung unten / oben im Flexbox-Layout
Ich habe ein Flexbox-Layout mit zwei Elementen. Einer von ihnen verwendet Polsterung unten : Code-Snippet anzeigen #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px …
5
Wie stelle ich einen Flex-Container auf die Breite seiner Flex-Elemente ein?
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 …
74 css  flexbox 
4
Verhindern Sie das Schrumpfen der Flexbox
Ich verwende Flexbox, um eine Seite zu gestalten, da das wachsende Verhalten nützlich ist. Aber ich möchte das Schrumpfverhalten vollständig verhindern . Wie auch immer, um das zu schaffen? Beispielcode: <div class="flex-vertical-container"> <div class="flex-box"> This one should grow but not shrink </div> <div></div> <div></div> </div> CSS .flex-vertical-container { display: flex; …
74 css  flexbox 
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.