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.
CSS Flexbox: Wie richten Sie die untergeordneten Elemente einer flexbox-container an entgegengesetzten enden der Hauptachse?
5 Antworten
Ich bin ein styling-header einer Webseite. Ich möchte den header einer einzigen Zeile, die enthält ein logo und einige Navigations-links. Ich fühle mich der beste und modernste Weg, um layout dieser header ist heute mit CSS3 ist
CSS: Flex-Box nicht drucken Sie alle Seiten von Firefox
1 Antworten
Ich habe eine Seite mit einer Struktur ähnlich zu diesem: <main> <section> <article></article> <aside></aside> </section> </main> In der CSS habe ich auch die folgende: main { display: flex; flex-direction: row; } Ist der Artikel oft viele Seiten
Wie position: fixed die navbar bei der Verwendung von flexbox
1 Antworten
Beginnend mit diesem layout: http://codepen.io/RebelOne/pen/wodbpR .navbar { display: flex; justify-content: space-between; Wenn ich position: fixed to the navbar, bricht es zusammen nach unten und füllen nicht die Breite des wrapper. Weiß jemand, wie man dieses Problem beheben?
flex-container mit min-height im IE ignoriert
3 Antworten
Soweit ich in der Lage gewesen, sich zu versammeln, wenn die Arbeit mit IE10 /IE11 ich sollte in der Lage sein, die Verwendung der standardisierten flex-Bezug. Ich habe einen div-container und 2 child-divs. Den 2 child-divs sind
Flexbox: Wie rechtfertigen Sie Inhalte mit Raum-zwischen-UND haben alles zentriert?
2 Antworten
Ich in ein problem mit flexbox. Ich habe einen div, der eine max-Breite von 920px. Ich will die Boxen Inhalt zu füllen, ist das div von Links nach rechts, um die max mögliche Breite, mit allem, was
Flexbox außerhalb seines Containers
3 Antworten
Ich versuche einen header-bar, in der es sind 3 Elemente, die zuerst nimmt man genau so viel Platz wie Sie können, während die anderen 2 nehmen so viel, wie Sie benötigen. | title | button | button
Flexbox-der Raum zwischen den mit Linien zwischen den Zeilen
3 Antworten
Dies ist eine Frage, die ich schon eine Lösung, aber ich Frage mich, ob es einen besseren Weg. Was ich will ist die Verwendung von flexbox zu haben Reihen von Elementen mit noch Platz dazwischen und einer
Tabelle erstellen 100% mit festen header mit dem smart table-eckig
1 Antworten
http://plnkr.co/edit/GIeXoF?p=preview Wie kann ich diese Tabelle mit einer Höhe von 100% Höhe, aber der header muss noch fixiert bleiben? <!DOCTYPE html> <html ng-app="myApp"> <head> <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script data-require="[email protected]" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script> <link rel="stylesheet" href="style.css"
css calc-bug im IE11
1 Antworten
IE11 scheint nicht zu berechnen calc(50% - 1rem), aber alle anderen Browser tun. Wie kann ich es beheben? InformationsquelleAutor Blaja | 2014-04-12
Wie center vertikal mit Winkel-Flex-Layout?
3 Antworten
Ich habe eine einfache login-Komponente und ich würde gerne vertikal-center, aber ich bin mir nicht sicher, wie das zu erreichen ist die Verwendung der Winkel-Flex-Layout-Bibliothek. app.component.html <router-outlet></router-outlet> login.component.html <div fxLayout fxLayoutAlign="center center"> <mat-card fxFlex="30%"> <mat-card-title>Login</mat-card-title> <mat-card-content fxLayout="column">
Reagieren-Native + Flex reagiert nicht auf die Ausrichtung ändern
8 Antworten
Schreibe ich eine Universelle iPhone/iPad-Anwendung mit Reagieren-Native. Aber ich bin kämpfen, um meinen Blick richtig, wenn sich die Ausrichtung ändert. Im folgenden ist der Quelltext für js-Datei: 'use strict'; var React = require('react-native'); var { Text, View
Flex-box ignoriert eingewickelt Kinder-Marge (Marge Zusammenbruch)
2 Antworten
Angesichts des folgenden HTML-Code: <div class="outer"> <div> <div class="inner">A</div> </div> </div> <div class="outer"> <div class="inner">B</div> </div> und die folgenden CSS - (prefix-free): .outer { display: box; box-orient: vertical; height: 100px; width: 100px; background: red; margin: 10px; }
flex nicht die Css-Unterstützung in Safari , iPhone 5 Webviews und mobile Browser
1 Antworten
Diese sind HTML: <div class="btn-toolbar text-center" role="toolbar"> <a href="#" class="btn btn-success">Link 1</a> <a href="#" class="btn btn-success">Link 11</a> <a href="#" class="btn btn-success">Link 111</a> <a href="#" class="btn btn-success">Link 1111</a> <a href="#" class="btn btn-success">Link 11111</a> <a href="#" class="btn btn-success">Link 111111</a>
Wie machen Komponente stick nach unten in das ScrollView aber noch alow andere Inhalte, um es nach unten drücken
2 Antworten
Habe ich drei Ansichten: eine oben, Mitte und unten. Das scroll-Ansicht nimmt den ganzen Bildschirm. Das problem ist, dass jetzt die scroll-view ist nicht Scrollbar. <ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}> <View><SomeContent /></View> <View><SomeContent
Break-Elemente auf eine neue Zeile mit flex-grow und flex-wrap
2 Antworten
Ich habe ein parent-div (.tags) enthält links und einen Titel. Dem übergeordneten div eingestellt ist display: flex; mit flex-wrap: wrap;. Ich würde gerne den link-Elementen zu brechen auf einer neuen Zeile löschen der Titel, wenn der Wickel-Effekt
input / button-Elemente nicht kleiner wird in ein flex-container
2 Antworten
Wenn input-und button-Elemente innerhalb eines flex-container, die flex - und/oder flex-grow Eigenschaften scheinen nicht, etwas zu tun. Code, der veranschaulicht mein Problem. CSS: button, input { font-size: 1rem; } button { border: none; background-color: #333; color: #EEE;
Reagieren nativen flexbox - how zu tun Prozentsätze || Spalten || responsive || grid etc
3 Antworten
Nach der Arbeit mit react native auf iOS für die letzten paar Wochen, scheine ich über einige Unzulänglichkeiten der flex styling... vor Allem, wenn es um "responsive" Verhalten. Zum Beispiel, können sagen, Sie möchten eine Ansicht erstellen,
Vertikal zentrieren von text innerhalb flexbox-Element
2 Antworten
Möchte ich die flex-items in voller Höhe, aber der Inhalt in Ihnen werden vertikal zentriert. justify-content: centre funktioniert nicht, und align-self: centre auf das Element selbst schrumpft in seiner Höhe zu seinen eigenen Inhalten, während ich möchte,
Was ist der Unterschied zwischen visibility: hidden und Sichtbarkeit: Einbruch in flexbox?
2 Antworten
In der CSS flexible box layout module, es sagt: minimierten flex-Element entfernt vom Rendern ganz, aber hinterlässt ein "Federbein" Nicht, die Verhalten sich genauso wie die visibility: hidden? Wenn die Antwort ja ist, warum dann wurde visibility:
Flex-wrap ist nicht einwickeln, wenn ich die Größe des Fensters
2 Antworten
Habe ich eine Reihe von drei Containern und angewendet display: flex; und flex-wrap: wrap; um Sie, aber Sie sind nicht einwickeln, wenn ich die Fenster Größe? Ich habe den code unten und scheinen nirgends im Sinne von
Flexbox-stretch textarea in der Spalte
1 Antworten
Ich versuche das textarea in eine 2-Spalten-layout zu dehnen und füllen den leeren Raum. Also die Rechte Spalte ist variabel in Höhe und ich möchte die textarea in die linke Spalte zu dehnen und füllen den leeren
Flexbox: Wie Kombinieren Prozent, Pixel und die Verbleibende Höhe für Spalten?
1 Antworten
Ich bin Aufbau der grundlegenden grid-system und verbinden müssen, die Höhe der flex-Elemente beschrieben, die in verschiedenen Größen Einheiten,%, px, und der Verbleibende Platz. html: <div class="grid"> <div class="block" style="flex-basis: 50px;">50px</div> <div class="block" style="flex-basis: 25%;">25%</div> <div class="block">stretch
flexbox-fallback-anzeigen-Tabelle in älteren Browsern
1 Antworten
Gibt es einen besseren Weg, als unten, um sicherzustellen, dass ich nur Ziel-Browsern, die nicht unterstützt flexbox. Ich glaube, das könnte funktionieren, aber vielleicht werde ich brauchen, einige Stile, die nur für den ie8 und 9 zum
Abstand zwischen flex-Elemente?
2 Antworten
JSFiddle Habe ich eine Liste angezeigt mit flex: <ul> <li></li> .... ul{ list-style-type: none; display: flex; flex-wrap: wrap; background: gold; } li{ flex-basis: 25%; background:grey; } Nun möchte ich etwas Platz zwischen meine li-Elemente, das hinzufügen von
iPhone 6 Flexbox-Umhüllung Problem
3 Antworten
Genieße ich mit flexbox, aber für einige Grund, warum ich nicht Holen Sie sich einwickeln können auf jedem iOS-Gerät. Gibt es eine einfache fallback für die Verpackung? Hier ist ein Thema, bei dem die Elemente nur nicht-wrap:
prozentuale Höhe in verschachtelten flex-box
1 Antworten
Habe ich eine ziemlich gute einstellbare Schnittstelle arbeitet mit flexbox, wo ein Benutzer können anpassen die Höhe und Breite der Paneele. Ich möchte jedoch, ändern Sie die Höhen der Platten, die derzeit verwenden Sie Pixel, um die
Flexbox Höhe nicht aktualisiert wenn sich der Inhalt ändert
3 Antworten
Scheint es ein problem mit flexbox in Chrom wirkt sich auf die Spalten der Variablen Höhe. Wenn der Inhalt dieser Spalten ändern, sollte die Spalte Größe ändern, aber es funktioniert nicht Habe ich eine JS-fiddle hier -
verschachtelte CSS3 flexboxes nicht funktioniert
2 Antworten
Kann flexboxes verschachtelt werden? Ich geschachtelt haben eine horizontale flexbox in einer horizontalen flexbox, und eine vertikale flexbox in einer vertikalen flexbox. Nur der horizontal in der horizontalen funktioniert in chrome und weder in firefox! Habe ich
Wie man flex-Elemente werden vertikal anstatt horizontal?
1 Antworten
Ich versuche, 2 Elemente display vertikal. Diese funktionieren soll, aber auf firefox 21 die Elemente zeigen, bis horizontal. Jeder weiß, warum und wie es zu lösen ist? <!DOCTYPE html> <html> <head> <style> div { width: 50%; display:
Fügen Sie eine Trennlinie zwischen den flex-items mit gleicher Verteilung der Raum
6 Antworten
Ich habe eine Liste mit verschiedenen Elemente, die auto-Breite (ohne Feste Breite gegeben werden kann, in meinem Fall). Ich benutze justify-content: space-between weil mein ersten Eintrag hat am Anfang des Containers und mein letzter Punkt am Ende.
Die Erkennung von flex-wrap-Unterstützung in Browsern
4 Antworten
Arbeite ich an einem Projekt, in dem ich eine responsive grid, die ich erreicht habe, mit flex-wrap-Eigenschaft. Da unterstütze ich mit dem IE9 und niedrigeren Versionen von Firefox ab version 28 und unten, wie finde ich heraus,
Bild im flex-Element ignoriert max-height:100% in chrome und firefox (funktioniert auch in safari)
2 Antworten
Ich will ein Bild zu füllen entweder die Breite oder Höhe des Fensters-Größe/viewport. Für ein besseres Verständnis, was ich versuche zu tun, ich habe ein Beispiel erstellt, auf codepen - bitte prüfen Sie aus und ändern Sie
Flex-Element in voller Breite, nachdem Sie gewickelt ohne Verwendung von media queries
2 Antworten
Verwendung von flexbox hier. Ist es möglich, überlappende element in voller Breite nach unten gedrückt, ohne media queries? Siehe beigefügte plunker: http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview Die Größe der Vorschau-Fenster auf weniger als 425px width. Drittes element zu erhalten, ist nach
Elemente in einem flex-container sind nicht einwickeln
2 Antworten
Wenn ich versuche, einfügen block-Elemente in einem flex-container, Sie alle bleiben auf der gleichen Linie, wenn Sie waren inline-blocks. Möchte ich die ersten beiden div ' s auf der gleichen Linie, und die Letzte werden auf eine
Reagieren Nativen alignSelf center und dehnen und maxWidth?
1 Antworten
Habe ich Folgendes <View style={{maxWidth: 700}}> <View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}> <Text>Left Item</Text> <Text>Right Item</Text> </View> </View> die so funktioniert, wie ich erwarten würde, auf einem großen Gerät (vertikale schwarze Linien sind die Kanten der
Ausrichten an der Unterseite in der flexbox
2 Antworten
Ich bin haben Container das sollte sich ändern Höhe dynamisch, je nach Inhalt. Für alle Behälter in einer bestimmten Zeile, der untere text sollten alle auf der Unterseite fixiert, unabhängig von Inhalt in einem einzelnen container. CSS:
Die Verwendung rechtfertigen-content: flex-end und vertikale Bildlaufleiste
5 Antworten
Habe ich chat und ich muss scrollen alle Inhalte nach unten. Ich will justify-content: flex-end und vertikale Bildlaufleiste. CSS: .session-textchat { height: 320px; background: #fff; display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; -webkit-justify-content: space-between; justify-content: space-between;
Ausrichten von Elementen flex Ende reagieren nativen
2 Antworten
Ich bin neu in flexbox-styling. Ich bin vor problem beim Versuch, richten Sie ein element in der flexbox die ganz Rechte Ecke. Ich habe geschrieben das folgenden code, richten Sie die plus-symbol im Bild auf der rechten
Anwendung übergang auf flexbox-justify-content-Eigenschaft
3 Antworten
Habe ich eine CSS-Klasse, die auf hover ändern sollten justify-content Eigenschaft von center zu flex-start mit einer Verzögerung von 1s. So funktioniert alles einwandfrei und ist verzögert wird, wird außer von der justify-content. .menuItem:hover { transition-property: all;
Warum flex-box funktioniert mit einem div-Tag, aber nicht eine Tabelle?
3 Antworten
Einfach Folgendes snippet Ergebnisse in einer einzelnen web-Seite, die den verfügbaren Platz auf dem Bildschirm mit einem Kopf an der Spitze, eine Fußzeile am unteren Rand, und die wichtigsten Inhalte unter so viel Raum wie möglich (mit
Flüssigkeit flexbox-raster mit festen Spaltenbreiten
3 Antworten
Ich habe einen container eingerichtet, über flexbox. Ich möchte nicht gleichmäßig verteilen kann jede der Kacheln im inneren des Behälters, sondern halten Sie mit einer festen Breite von 220px. Ich bin gekommen, zu schließen mit flex-grow und
So erstellen Sie eine Seitenleiste und content-Bereich mit flexbox?
1 Antworten
Möchte ich nutzen, flexbox um eine Seitenleiste zu erstellen und Haupt-content-Bereich. Die Höhe der sidebar sollte mindestens die Fenster. Allerdings, wenn der Inhalt die Höhe größer ist als das Fenster, dann die Höhe der sidebar sollte wachsen,
<span> - element weigert sich zu gehen in inline-flexbox
1 Antworten
Ich habe eine span (.time-pretext) in einem div innerhalb einer flexbox a wie diese: <a class="option-container option-edit-time" href="#"> <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div> <div class="option-text"><span class="time-pretext">I have</span>60 minutes</div> </a> .option-text hier bekommt flex-direction: column, und wenn ich
Wie kann man das flex-Spalte Höhe bug im IE
3 Antworten
Im IE ich habe ein problem, wo mein flex Spalte gestreckt ist, aus unbekannten Gründen. Ich brauche das Bild in Höhe und Breite der einzelnen flex-Element immer die gleichen und auch so reagieren, muss ich Ihnen zu
Machen Sie ein dropdown-Menü in flexbox-navbar
4 Antworten
Ich habe eine Navigationsleiste mit den flex-Eigenschaften. Ich möchte nun hinzufügen einer drop-down-Menü, um ein element in der navbar, aber es nicht funktionierte wie erwartet. CSS: @font-face { font-family: Oxygen; src: url('https://fonts.googleapis.com/css?family=Oxygen'); } body{ margin: 0; }
display: inline-flex; Ursachen seltsame box-Modell-rendering
1 Antworten
begegnete mir etwas seltsam vor kurzem und ich wan ' T, um es mit Ihnen teilen und vielleicht jemand weiß, warum dies geschieht. Weil ich nicht genug rep ich muss link die screenshots: Noch - Keinen Abstand
Wie zu installieren flexbox?
1 Antworten
Ich bin sehr neu in der Programmierung und ich bemerkte, dass jemand erwähnt, flex-box. Nach der Lektüre eine Menge über ihn, wie es scheint, etwas, das wäre sehr nützlich für mich. Das problem ist nur, dass ich
5 gleich Breite Spalten in der bootstrap (Breite der container)
4 Antworten
Laut meiner psd-Vorlage, die ich habe-CONTAINER besteht aus 5 gleich Breite (344px) Spalten. Ich beschlossen zu gehen mit bootstrap in Bezug auf Reaktionsfähigkeit. Aber jetzt bin ich frustriert, mit dieser Aufgabe. Gibt es eine Möglichkeit dies umzusetzen
Wie richten Sie eine Komponente nach Links und andere nach rechts (Ende der Seite) reagieren die einheimischen?
1 Antworten
Mache ich eine app Reagieren Muttersprache, und ich will richten Sie einen Kreis mit dem Ende der Seite. Ich das machen will: Aber es ist derzeit so und nur so bleibt: Vollständige Ansicht: [ Ich habe bereits
Stellen Sie CSS-Flex-Elemente Ignorieren Container-Element
2 Antworten
Bin ich arbeiten, um eine Komponente zu erstellen, ähnlich Gewählt, aber ich laufen in ein Problem mit flex und Verpackung. Die Kernaussage ist, dass jeder "chip" in die pseudo-textbox muss in einem container sein, der nicht auch