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.

Wie verwende ich die "flex-flow: column wrap"?

Anzahl der Antworten 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

Ist es möglich, für flex-Elemente ausrichten, die eng an die Artikel über Sie?

Anzahl der Antworten 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

Mit flex-order-Eigenschaft neu zu ordnen Elemente für desktop-und mobile Ansichten

Anzahl der Antworten 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

Kann nicht scrollen zum Anfang der flex-Element, die überquellenden container

Anzahl der Antworten 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

Mitte und unten-Ausrichtung der flex-Elemente

Anzahl der Antworten 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

Bei der flexbox-Elemente umbrechen, die in der Spalte Modus, container wächst nicht mit seiner Breite

Anzahl der Antworten 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

Halten Sie die mittlere Element zentriert, wenn die Seite Elemente haben unterschiedliche breiten

Anzahl der Antworten 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

Halten Sie die mittlere Element zentriert, wenn die Seite Elemente haben unterschiedliche breiten

Anzahl der Antworten 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

Höhe Spalten mit zentrierten Inhalten in flexbox

Anzahl der Antworten 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:

Targeting-flex-Elemente auf die Letzte oder eine bestimmte Zeile

Anzahl der Antworten 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

Die richtige Verwendung von flex-Eigenschaften bei flex-Container verschachteln

Anzahl der Antworten 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,

Ein flex-Element legt den Grenzwert für die Höhe für Geschwister

Anzahl der Antworten 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

Halten Sie die mittlere Element zentriert, wenn die Seite Elemente haben unterschiedliche breiten

Anzahl der Antworten 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

Flexbox funktioniert nicht in android browser in Android 4.4.2

Anzahl der Antworten 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

vuetify-center-Artikel in den v-flex

Anzahl der Antworten 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

Sticky footer im Winkel 2 Material

Anzahl der Antworten 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

Versuchen, erstellen Sie zwei Spalten in reagieren-native

Anzahl der Antworten 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

Set Höhe von CSS-flex-Elemente auf die gleiche Höhe?

Anzahl der Antworten 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;

Richten Sie das Symbol, um Links und text zu zentrieren, in reagieren nativen

Anzahl der Antworten 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

flexWrap funktioniert nicht für <Text> - element Reagieren Nativen

Anzahl der Antworten 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

React Native - Sticky footer an den unteren Rand des Containers

Anzahl der Antworten 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

Vertikal zentriert ausrichten, eine Spalte in der Bootstrap

Anzahl der Antworten 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

etwas über display:-webkit-box; -webkit-box-flex:1

Anzahl der Antworten 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}

Warum ist die zwei p-tags nicht neben einander, als der Bildschirm breit ist?

Anzahl der Antworten 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

CSS-only-Mauerwerk-layout

Anzahl der Antworten 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

Kraft flexbox-element nicht zu nehmen alle vertikalen Raum

Anzahl der Antworten 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

Flex Kind die gleiche Höhe haben wie der Elternteil innerhalb von grid-Spalte

Anzahl der Antworten 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

flex-direction: column; funktioniert nicht

Anzahl der Antworten 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:

Was sind die Unterschiede zwischen den flex-basis und Breite?

Anzahl der Antworten 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

Wie verwenden von Flex-CSS und simulieren rowspan 2 und colspan 2

Anzahl der Antworten 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

Bootstrap-4 Center Seitenumbruch in Spalte

Anzahl der Antworten 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

Flexbox-3 divs, zwei Spalten, eine mit zwei Zeilen

Anzahl der Antworten 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,

2x2 Gitter in Flexbox mit fester Breite Spalte

Anzahl der Antworten 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

Reagieren Native flex-box ausrichten icon und text

Anzahl der Antworten 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

Bootstrap-4-Mauerwerk-layout unter Verwendung flexbox-raster

Anzahl der Antworten 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,

CSS flexbox-max Spalte Nummer?

Anzahl der Antworten 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

Flexbox: Füllen verbleibenden Platz aber noch wickeln

Anzahl der Antworten 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

Gleich viel Raum zwischen den flex-items

Anzahl der Antworten 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

Flexbox-Zentrierung auf Safari

Anzahl der Antworten 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,

Flexbox-Ausrichtung mit Bildern und text in den selben container

Anzahl der Antworten 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

Flexbox-in Safari: Wachsen und schrumpfen

Anzahl der Antworten 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

Mit margin-flex-Elemente

Anzahl der Antworten 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:

Bewegt Spalte in nächste Zeile verwenden von Flex-Box

Anzahl der Antworten 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;

Wie Sie Inhalte unten auf Bootstrap 4 col

Anzahl der Antworten 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>

CSS flexbox-Breite 100% Firefox

Anzahl der Antworten 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

Wie kann ich overflow:scroll innerhalb einer flex-box

Anzahl der Antworten 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>

Wie hinzufügen von padding oder margin nur auf die layout-container in Eckige ngMaterial?

Anzahl der Antworten 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

Eckig Material: layout-ausfüllen nicht ausfüllen parent <div>

Anzahl der Antworten 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

Wie man flexbox-Ausrichtung-Elemente flex-end-Arbeit in WebKit/Blink?

Anzahl der Antworten 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

Bootstrap-4: Wie man die Zeile stretch Verbleibende Höhe?

Anzahl der Antworten 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.