Tag: flexbox
CSS3-Modul für flexible layouts mit einer breiten Palette von Optionen für die Anordnung der Elemente und eliminiert die Notwendigkeit für Schwimmer und Tabellen.
3
Antworten
Kurze version Bei der Verwendung flex-flow: column wrap und display: inline-flex es nicht shrinkwrap wie inline-block: JS: (function() { var ascending = true; setInterval(function() { var parent = document.getElementById('flex'); if (ascending) { var child = document.createElement('p'); child.innerHTML
7
Antworten
Dies ist in der Tat, das Pinterest-layout. Allerdings, die Lösungen online zu finden sind, verpackt in Spalten, das heißt, dass der Behälter versehentlich wächst horizontal. Das ist nicht das Pinterest-layout, und es funktioniert nicht mit dynamisch geladenen
0
Antworten
Habe ich 3 divs in einem container. Es gibt keine verschachtelten divs. Bin ich mit flex und order Eigenschaft. Auf dem Handy ist, ist es ok mit order Eigenschaft. Aber auf größeren Bildschirmen ist es ausfällt. Ich
5
Antworten
So, in dem Versuch zu machen, eine sinnvolle modale Verwendung von flexbox habe ich gefunden, was zu sein scheint ein browser-Problem und Frage mich, ob es einen bekannten fix oder workaround -- oder Ideen auf, wie es
0
Antworten
Ich habe ein flex-container (das Blaue Quadrat) mit den folgenden Eigenschaften: display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; Daher, Ihre Kinder (hellblaue Quadrate) ordnen sich-wie Sie unten sehen. Aber ich möchte noch hinzufügen, dass ein anderes
3
Antworten
Arbeite ich in einem verschachtelten flexbox-layout, das sollte wie folgt funktionieren: Äußerster Ebene (ul#main) ist eine horizontale Liste, die sich erweitern müssen nach rechts, wenn mehr Elemente Hinzugefügt werden. Wenn es wächst zu groß, es sollte eine
1
Antworten
Stellen Sie sich das folgende layout, wo die Punkte stehen für den Raum zwischen den Boxen: [Left box]......[Center box]......[Right box] Wenn ich entfernen die Rechte box, wie ich die center-box noch in der Mitte, etwa so: [Left
1
Antworten
Stellen Sie sich das folgende layout, wo die Punkte stehen für den Raum zwischen den Boxen: [Left box]......[Center box]......[Right box] Wenn ich entfernen die Rechte box, wie ich die center-box noch in der Mitte, etwa so: [Left
1
Antworten
Ich würde gerne zwei Spalten gleich hoch sind und deren Inhalt sollte Mitte ausgerichtet, also in der Mitte von jedem div. Problem: 'Höhe' und 'Mitte ausgerichtet' auszuschließen scheinen sich, das eine geht nicht mit dem anderen. Frage:
3
Antworten
Mein problem ist, dass ich will, dass die flexbox-mit variabler Breite Palette, und alles funktioniert gut, aber nicht auf der letzten Zeile. Ich will das gleiche Maß für alle Kinder, auch dort, wo die Zeile nicht voll
1
Antworten
Ich habe Probleme, mich mit flexbox richtig und wollte eine Klarstellung, wie das verschachteln von übergeordneten und untergeordneten Elementen arbeitet. Ich weiß, dass das Kind erbt die übergeordneten flex. Aber nicht, dass überschrieben werden, wenn Sie brauchen,
1
Antworten
Habe ich zwei gleichgeordnete Elemente, die jeweils die dynamischen content enthalten. <div class="flex"> <div class="sibling-1"></div> <div class="sibling-2"></div> </div> In einigen Fällen sibling-1 mehr content und dann sibling-2 - und Umgekehrt. Ich möchte die Höhe des zweiten Elements
1
Antworten
Stellen Sie sich das folgende layout, wo die Punkte stehen für den Raum zwischen den Boxen: [Left box]......[Center box]......[Right box] Wenn ich entfernen die Rechte box, wie ich die center-box noch in der Mitte, etwa so: [Left
2
Antworten
Gibt es diese website, die ich gearbeitet habe für einen Kunden von mir und ich habe das mobile-layout. Ich habe mich entschieden, einen flexbox-layout für die gesamte website, aber für einige ungerade Grund, die Aktie android-web-browser für
3
Antworten
Ich versuche, die Mitte ein <v-btn> in eine <v-flex>. Da <v-flex> ist eine flexbox-div, ich benutze justify-center dass verwandelt sich in justify-content: center Seit meine Richtung ist die horizontale, meine Taste, sollte sein Zentrum ausgerichtet, aber es
2
Antworten
Ich habe die Suche und Suche nach über 3 Stunden jetzt, weil ich nicht wollen, zu haben, zu Fragen, aber wie kann ich eine 'Fußzeile' variable am unteren Rand, aber nicht wie fest auf dem Boden, so
2
Antworten
Ich bin versucht, zu erstellen eine zweispaltige raster mit flex. Eine Spalte wird verwendet, um anzuzeigen, ein Wort oder einen Satz und die zweite Spalte die übersetzung der ersten Spalte. Hier ist ein link: http://imgur.com/nZGo8pb, um Ihnen
3
Antworten
Ich habe 2 divs nebeneinander, die ich vertikal zentrieren und horizontal mit flex und justify-content/align-items. Beispiel HTML: <div class="inner"> <div class="section green"> <img src="http://i.imgur.com/hEOMgVf.png"> </div> <div class="section red"> <img src="http://i.imgur.com/nEybO1g.png"> </div> </div> CSS: .inner { float: left;
3
Antworten
Ich versuche, mit flexbox zu richten mein Symbol Links neben der Schaltfläche Ansicht und den text zentriert. Derzeit sind Sie beide ausgerichtet auf das Zentrum, aber ich bin nicht sicher, wie man meine-Symbol auf der äußersten linken
4
Antworten
Hier ist mein sceanario var FlexWrap = React.createClass({ render:function(){ return(<View style={{flexDirection:'row'}}> <Image source={{uri:profileImage}} style={{width:100,height:100}}> </Image> <View style={{marginLeft:5}}> <Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap'}}> This sample text should be wrap wrap wrap .... </Text> <Text style={{marginTop:5, marginBottom:5, flexWrap:'wrap'}}> This sample
2
Antworten
Ich versuche, mich ein <View> genannt footer - stick an der Unterseite des right container. Ist hier ein live-Beispiel: https://rnplay.org/apps/G3rHqQ Wenn ich den linken container höher als der richtige dann wird es nicht funktionieren. Wenn der Rechte
1
Antworten
Ich habe versucht, ein Dutzend Wege zur Mitte ausrichten Spalte vertikal in der bootstrap -, aber keiner war. Mein problem ist, ich weiß nicht, dann Höhe der Spalte. Kann ich mit flexbox? Ist es eingebettet in Bootstrap
3
Antworten
Versuchen, eine situation vorstellen, dort ist ein div-Element und im inneren des Behälters gibt es drei divs , und manchmal müssen wir lassen die inneren divs selbst-adaption. wie diese css: .a{display:-webkit-box;width:300px;height:100px;background:#222} .a div{ -webkit-box-flex:1;height:100px} .a-1{background:red} .a-2{background:yellow} .a-3{background:blue}
2
Antworten
Wenn die browser-Breite von mehr als 1000px den div.flex-container ändert so dass die p-tags werden konnte, neben jeder anderen. Sie sind jedoch immer noch übereinander. Was kann ich tun, um Sie neben einander auf großen Bildschirmen und
0
Antworten
Brauche ich zur Umsetzung ein ziemlich run-off-the-mill-Mauerwerk-layout. Jedoch, für eine Reihe von Gründen, ich will nicht, JavaScript zu verwenden, um es zu tun. Parameter: Alle Elemente haben die gleiche Breite Elemente haben eine Höhe, die nicht berechnet
0
Antworten
TL;DR: flex-element mit flex-direction: row nimmt alle vertikalen Raum und verhindert, dass die scrollbar in seiner Kind. Den erste Geige zeigt, welche Art von Benutzeroberfläche würde ich gerne erreichen: es ist eine Seite, die erstreckt sich um
6
Antworten
Ich versuche zu bauen, eine Preis-Tabelle, wo jede Spalte enthält eine Karte. Ich will alle Karten zu dehnen, um die Höhe von deren Eltern.col) Elemente. Hinweis: ich bin mit Bootstrap 4, und versuchen zu erreichen, diese mit
1
Antworten
Ich habe eine ul tag mit display: flex. Brauche ich es bestellt Spalte mit flex-direction: column;, aber es funktioniert nicht. css für den container #nav li.four_columns ul.sub-menu { width: 600px; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-content:
2
Antworten
Es wurden Fragen und Artikel über dieses, aber nichts schlüssig wie weit ich es sagen kann. Die beste Zusammenfassung, die ich finden konnte, ist flex-basis spezifizieren Sie die anfangs - /Ausgangspunkt Größe des Elements, bevor irgendetwas anderes
0
Antworten
Will ich bauen Sie ein responsive-layout mit 2 Zeilen mit divs . Ich versuche das jsbin: http://jsbin.com/jiyanayayi/edit?html,css-Ausgabe Wird die erste Zeile drei Zellen, von denen die Letzte (Zelle 3) muss eine rowspan = 2 Der zweiten Zeile
3
Antworten
Ich bin mit Bootstrap 4 und dem Versuch, eine horizontal-center ein pagination UL innerhalb einer grid-Spalte. Nun, dass die pagination ist display:flex ich nicht bekommen kann es richtig zu zentrieren. Möchte ich verwenden nur bestehende Bootstrap-Klassen w/o
1
Antworten
Ich versuche zu nehmen <div></div> <div></div> <div></div> Drei aufeinanderfolgenden divs und schalten Sie ihn in die unten. Wo rot ist, div 1, grün ist div 2, blau ist div 3. Kann ich dies tun mit dem Wagen,
0
Antworten
Ist es möglich, dieses raster mit Flexbox: ---------- A1 | B1 ---------- A2 | B2 ---------- A1&A2 haben eine Feste Breite (50px) und B1&B2 füllen den übrigen Raum. Ich will nicht, um Wrapper für die Spalten, da
1
Antworten
In einem react native app, ich benutze 'react-native-vector-icons/MaterialIcons'. Ich versuche, eine < Schaltfläche mit text. Leider, die < Symbol ist nicht ausgerichtet-center mit dem text. Der text ist auf der gleichen Linie wie die < aber nach
0
Antworten
Gibt es einen Weg zum erstellen von Mauerwerk-Spalten-layout unter Verwendung der flexbox-grid, Bootstrap-4 ist ausgestattet mit? Es scheint mir, dass alle Spalten gleich hoch sind. Ich habe eine Google-Suche und nicht in der Lage war zu finden,
0
Antworten
Ich würde gerne meine css-flexboxes zu maximal 3 Spalten, wenn der Benutzer erweitert Ihren browser-Fenster. Mit meinem aktuellen code, es beugt korrekt nach innen, ohne minimale Anzahl von Spalten, aber beim ausfahren nach außen wird es immer
1
Antworten
Gibt es eine Möglichkeit zu sagen flexbox-Elemente füllen den übrigen Raum aber wickeln so bald, wie Sie immer kleiner sind als Ihre Inhalte. Einige der Elemente, die einen festen Prozentsatz der Breite aber. HTML <div class="grid"> <div
2
Antworten
Ist es, einen Weg zu einer vollen Einheit von Raum auf beiden Seiten von allen Positionen, einschließlich der ersten und letzten? Ich versuche einen Weg zu finden, haben gleichen Abstand um die flexbox-Kinder. In dieser Artikel es
1
Antworten
Des folgenden code-Zentren ein video vertikal und horizontal in Chrom und die meisten modernen Browser außer Safari, wo es ist nur vertikal zentriert: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1,
2
Antworten
Ich mache eine flexbox-Mitarbeiter-ID-Karten-layout. Die Mitarbeiter-das Bild wird nach Links gehen und die Mitarbeiter-info (name, Mitarbeiter-id, Abteilung, etc) gehen an die rechts im Bild in Form einer Liste von oben nach unten. Muss ich dies tun, mit
1
Antworten
Ich versuche, eine cross-browser flexbox-layout, display-Karten positioniert, neben einander. Sie sollte Links - oder Rechtsbündig (bestimmt durch "Links" und "rechts" - Klassen), wenn dort ist genug Platz für alle Karten, aber schrumpfen, wenn gibt es nicht. Wenn
1
Antworten
War ich unter dem Eindruck, dass ein Rand Hinzugefügt werden können flex-Artikel/Kinder-und flexbox automatisch die Rechnung und berechnen die korrekten Abstände zwischen den Elementen. Ich kann nicht scheinen, um diese arbeiten, wie ich möchte, aber. Fiddle hier:
1
Antworten
Ich habe drei Spalten, Bestell-1,2,3. HTML <div class="flex-container"> <div class="item first">1</div> <div class="item second">2</div> <div class="item third">3</div> </div> CSS .flex-container { display: flex; } .item { background: orange; padding: 10px auto; color: #fff; font-family: arial; flex-grow: 100;
1
Antworten
Ich habe den folgenden code für die Fußzeile: <div class="container"> <hr> <div class="row"> <div class="col-md-6"> © BusinessName 2017. </div> <div class="col-md-3"> <br> <a href="/blog"> Blog </a> <br> <a href="/blog"> FAQ </a> <br> <a href="/blog"> About </a> </div>
2
Antworten
Ich habe ein Problem mit diesem Szenario in Firefox. #pager nimmt die Breite Ihrer Kinder. Jedoch, in Chrom, nimmt es die Breite des übergeordneten Elements ein. Wie kann ich machen #item-Liste hinsichtlich der Breite des übergeordneten Elements
1
Antworten
Habe ich aus diesem layout: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> html, body{ margin:0; padding:0; height:100%; } .flex{ display:flex; flex-direction:column; min-height:50%; width:33.3333%; float:left; border:1px solid #C8C7CC; box-sizing:border-box; overflow:scroll; } .flex:last-child{ width:66.6666%; } </style> </head>
2
Antworten
Wenn ich layout-margin oder layout-padding zu einem layout-container, fügt diese Marge/Polsterung um jeden flex Kind-element und die container selbst. Beispiel: <div layout="row" layout-margin> <div flex>Parent layout and this element have margins.</div> </div> Möchte ich hinzufügen, Ränder der
3
Antworten
<!-- Container Div --> <div layout-fill> <!-- Image Div --> <div layout="column" layout-align="center center" class="coverImage" layout-fill> <md-content class="md-padding"> Sample Text Here </md-content> <md-button class="md-raised md-primary">Sign Up</md-button> </div> </div> Habe ich oben den Abschnitt der HTML -, und
1
Antworten
Ich versuche, ein nest flexbox in einem anderen flexbox. Die box ist vertikal: +------+ | | +------+ | | | | | | +------+ Wo der Obere Bereich passt der Inhalt flex 0 1 auto und die
1
Antworten
Ich versuche zu machen die container-fluid und 2. row zu Strecken, um die Verbleibende Höhe, aber ich konnte nicht einen Weg finden, es zu tun. Ich habe versucht Einstellung der align-items/align-self zu stretch aber hat nicht funktioniert.