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.

5
Flexbox und Internet Explorer 11 (Anzeige: Flex in <html>?)
Ich plane, mich von "schwebenden" Layouts zu entfernen und CSS-Flexbox für zukünftige Projekte zu verwenden. Ich war erfreut zu sehen, dass alle gängigen Browser in ihren aktuellen Versionen (auf die eine oder andere Weise) Flexbox zu unterstützen scheinen. Ich ging zu "Solved by Flexbox", um mir einige Beispiele anzusehen. Das …
8
Behalten Sie das Bildseitenverhältnis bei, wenn Sie die Höhe ändern
Wie kann ich mit dem CSS-Flexbox-Modell ein Bild zwingen, sein Seitenverhältnis beizubehalten? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Beachten Sie, dass sich die Bilder dehnen oder verkleinern, um die Breite des Containers auszufüllen. Das ist in Ordnung, aber können wir es auch dehnen oder verkleinern lassen, um die Bildproportionen beizubehalten? HTML &lt;div class="slider"&gt; …
114 html  css  flexbox 
2
Einen flexiblen Gegenstand nach rechts schweben lassen
Ich habe ein &lt;div class="parent"&gt; &lt;div class="child" style="float:right"&gt; Ignore parent? &lt;/div&gt; &lt;div&gt; another child &lt;/div&gt; &lt;/div&gt; Der Elternteil hat .parent { display: flex; } Für mein erstes Kind möchte ich den Gegenstand einfach nach rechts schweben lassen. Und meine anderen Divs folgen der vom Elternteil festgelegten Flex-Regel. Ist das möglich? …
108 html  css  flexbox 
2
Positionieren Sie den letzten Flexartikel am Ende des Behälters
Diese Frage betrifft einen Browser mit vollständiger CSS3-Unterstützung einschließlich Flexbox. Ich habe einen flexiblen Behälter mit einigen Gegenständen. Sie sind alle zum Flex-Start berechtigt, aber ich möchte, dass der letzte .end Punkt zum Flex-End gerechtfertigt ist. Gibt es eine gute Möglichkeit, dies zu tun, ohne den HTML-Code zu ändern und …
103 css  flexbox 
2
Zeilen gleicher Höhe im CSS-Rasterlayout
Ich stelle fest, dass dies mit Flexbox nicht möglich ist, da jede Zeile nur die minimale Höhe haben kann, die zum Anpassen ihrer Elemente erforderlich ist. Kann dies jedoch mit dem neueren CSS-Raster erreicht werden? Um es klar auszudrücken, möchte ich für alle Elemente in einem Raster über alle Zeilen …
1
Verhindern Sie, dass sich flexible Gegenstände dehnen
Stichprobe: div { display: flex; height: 200px; background: tan; } span { background: red; } &lt;div&gt; &lt;span&gt;This is some text.&lt;/span&gt; &lt;/div&gt; Führen Sie das Code-Snippet ausErgebnisse ausblendenErweitern Sie das Snippet Ich habe zwei Fragen, bitte: Warum passiert es im Grunde dem span? Was ist der richtige Ansatz, um zu verhindern, …
94 html  css  flexbox 
3
Flex / Grid-Layouts funktionieren nicht mit Schaltflächen- oder Feldsatzelementen
Ich versuche, innere Elemente eines &lt;button&gt;Tags mit Flexboxen zu zentrieren justify-content: center. Aber Safari zentriert sie nicht. Ich kann den gleichen Stil auf alle anderen Tags anwenden und er funktioniert wie vorgesehen (siehe &lt;p&gt;-tag). Nur die Schaltfläche ist linksbündig. Probieren Sie Firefox oder Chrome aus und Sie können den Unterschied …
91 html  css  safari  flexbox  css-grid 
4
Widerspricht 'position: absolute' der Flexbox?
Ich möchte einen divStick oben auf dem Bildschirm erstellen, ohne Einfluss auf andere Elemente und das untergeordnete Element in der Mitte zu haben. .parent { display: flex; justify-content: center; position: absolute; } &lt;div class="parent"&gt; &lt;div class="child"&gt;text&lt;/div&gt; &lt;/div&gt; Führen Sie das Code-Snippet ausErgebnisse ausblendenErweitern Sie das Snippet Wenn ich die position: …
7
Reagieren Sie auf die horizontale Mitte der nativen absoluten Positionierung
Es scheint, dass bei position:absoluteVerwendung ein Element nicht mit justifyContentoder zentriert werden kann alignItems. Es gibt eine Problemumgehung, die marginLeftjedoch nicht für alle Geräte gleich angezeigt wird, selbst wenn Abmessungen zum Erkennen von Höhe und Breite des Geräts verwendet werden. bottom: { position: 'absolute', justifyContent: 'center', alignItems: 'center', top: height*0.93, …
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.