Ich muss ein ziemlich gewöhnliches Mauerwerkslayout implementieren. Aus einer Reihe von Gründen möchte ich jedoch kein JavaScript verwenden, um dies zu tun. Parameter: Alle Elemente haben die gleiche Breite Elemente haben eine Höhe, die serverseitig nicht berechnet werden kann (ein Bild plus...
Wie wir alle wissen, das flexist Eigentum eine Abkürzung für das flex-grow, flex-shrinkund die flex-basisEigenschaften. Der Standardwert ist 0 1 auto, was bedeutet flex-grow: 0; flex-shrink: 1; flex-basis: auto; aber ich habe bemerkt, an vielen Stellen flex: 1wird verwendet. Ist es eine Abkürzung...
Der folgende Code befindet sich in diesem Live-Beispiel Ich habe das folgende native Element reagieren: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View...
Mit typischem CSS konnte ich eine von zwei Spalten links und eine andere rechts mit etwas Rinnenraum dazwischen schweben lassen. Wie würde ich das mit Flexbox machen? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display:...
Ich habe diesen Thread gefunden - Wie kann man ein Bild dehnen, um ein <div> zu füllen, während das Seitenverhältnis des Bildes beibehalten wird? - das ist nicht ganz das, was ich will. Ich habe ein Div mit einer bestimmten Größe und einem Bild darin. Ich mag immer füllen aus dem div mit dem...
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...
Ich habe eine einfache Webseite mit einigen Lipsum-Inhalten, die auf der Seite zentriert sind. Die Seite funktioniert gut in Chrome und Firefox. Wenn ich die Größe des Fensters verkleinere, füllt der Inhalt das Fenster, bis es nicht mehr möglich ist, und fügt dann eine Bildlaufleiste hinzu und...
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...
Ich habe ein <div class="parent"> <div class="child" style="float:right"> Ignore parent? </div> <div> another child </div> </div> Der Elternteil hat .parent { display: flex; } Für mein erstes Kind möchte ich den Gegenstand einfach nach rechts schweben...
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...
Wie kann ich feststellen, dass eine Flexbox-Layoutzeile den verbleibenden vertikalen Platz in einem Browserfenster belegt? Ich habe ein 3-reihiges Flexbox-Layout. Die ersten beiden Zeilen haben eine feste Höhe, aber die dritte ist dynamisch und ich möchte, dass sie auf die volle Höhe des Browsers...
Ich möchte eine App in voller Höhe mit Flexbox verwenden. Ich habe unter display: box;diesem Link gefunden, was ich mit dem alten Flexbox-Layout-Modul ( und anderen Dingen) möchte : CSS3 Flexbox-App in voller Höhe und Überlauf Dies ist eine korrekte Lösung für Browser, die nur die alte Version der...
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...
Ich war ein bisschen dabei und dachte, ich würde dieses position: sticky+ Flexbox-Gotcha teilen : Mein klebriger Div funktionierte einwandfrei, bis ich meine Ansicht auf einen Flexbox-Container umstellte, und plötzlich war der Div nicht mehr klebrig, als er in einen Flexbox-Elternteil eingewickelt...
Ich habe das CSS-Flexbox-Layout verwendet, das wie folgt aussieht: Wenn der Bildschirm kleiner wird, wird daraus: Das Problem ist, dass die Größe der Bilder nicht geändert wird, wobei das Seitenverhältnis vom Originalbild beibehalten wird. Ist es möglich, reines CSS und das Flexbox-Layout zu...
Stichprobe: div { display: flex; height: 200px; background: tan; } span { background: red; } <div> <span>This is some text.</span> </div> Führen Sie das Code-Snippet ausErgebnisse ausblendenErweitern Sie das Snippet Ich habe zwei Fragen, bitte: Warum passiert es im Grunde...
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; } <div class="parent"> <div
Ich versuche, innere Elemente eines <button>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 <p>-tag). Nur die Schaltfläche ist linksbündig....
Ich möchte, dass die Flex-Elemente zentriert sind, aber wenn wir eine zweite Zeile haben, müssen 5 (aus dem Bild unten) unter 1 und nicht im übergeordneten Element zentriert sein. Hier ist ein Beispiel für das, was ich habe: ul { display: flex; flex-direction: row; flex-wrap: wrap;...
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...