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.

Flex React Native — Wie der content Pause zur nächsten Zeile mit flex, wenn Sie Inhalte an edge

Anzahl der Antworten 1 Antworten
Habe ich eine Liste von icons in meinem Stil container, die angezeigt werden, in eine flexDirection:'row' aber wenn es mehr icons, als die Breite der Ansicht, dass Sie nicht brechen zur nächsten Zeile, sondern weiter nach rechts

webkit-box vs boxflex

Anzahl der Antworten 2 Antworten
Ich habe vor kurzem lief über ein tutorial, wo der Lehrer benutzt diese syntax: display: -webkit-box; http://www.youtube.com/watch?v=B-MNkBh7F2A @ 2:30 (erstellt aug 2012) Hatte ich nicht gesehen vorher und begann zu versuchen zu finden, einige Informationen über Sie.

Wie man flexbox auf die padding in den Berechnungen?

Anzahl der Antworten 3 Antworten
Unten sind zwei Zeilen. Ersten Zeile ist, die zwei Elemente auf flex 1 und einer an flex 2. Zweiten Reihe ist, die zwei Elemente auf flex 1. Laut spec 1A + 1B = 2A Aber wenn Polsterung

Flexbox: Zentrierung in der Mitte des Bildschirms

Anzahl der Antworten 1 Antworten
Wenn ich werde Mitte ein element in der Mitte des Bildschirms mit flexbox, ist dieser code elegantesten? http://codepen.io/vennsoh/pen/wEAmz HTML <div class='btn'></div> CSS body{ overflow: hidden; position: absolute; width: 100%; height: 100%; display: flex; } .btn{ width: 10rem;

Alle Artikel haben die gleiche Breite wie das breiteste element

Anzahl der Antworten 3 Antworten
Möchte ich zum erstellen dieser layout: Wenn ein Element nicht in den Behälter passen, können wir bewegen auf die nächste Zeile: Wenn der container die kleinen als die größeren posten, wir können wickeln Sie den Inhalt in

Wie zu Strecken, Kinder zu füllen Kreuz-Achse?

Anzahl der Antworten 1 Antworten
Ich habe eine Links-rechts-flexbox: CSS: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } HTML: <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> Das problem ist, dass das Rechte Kind nicht

Ausrichten von Elementen Links und in der Mitte mit flexbox

Anzahl der Antworten 6 Antworten
Ich bin mit flexbox zu richten, mein Kind-Elemente. Was ich tun möchte-center ein element und lassen Sie die anderen ausgerichtet, um den sehr linken. Normalerweise würde ich nur die Links-element mit margin-right: auto. Das problem ist, dass

Flexbox funktioniert nicht auf den button oder fieldset-Elemente

Anzahl der Antworten 2 Antworten
Ich versuche, Zentrum innere Elemente einer <button>-tag mit flexbox ist justify-content: center. Aber Safari nicht center Sie. Ich kann den gleichen Stil zu jedem anderen tags und es funktioniert wie vorgesehen (siehe <p>-tag). Nur der button ist

Scrollbare div-stick nach unten, wenn die äußeren div-änderungen in der Größe

Anzahl der Antworten 5 Antworten
Hier ist ein Beispiel-chat-app -> Die Idee hier ist, um die .messages-container nehmen so viel von dem Bildschirm, wie Sie können. Innerhalb .messages-container, .scroll hält die Liste der Nachrichten, und in Fall gibt es mehr Nachrichten, die

Warum sind die flex-Elemente nicht umbrechen?

Anzahl der Antworten 2 Antworten
Ich bin versucht, mehrere Reihen von Quadraten (3 pro Zeile), die die gleiche Höhe haben. Ich geschrieben habe, einige HTML-und CSS aber die Boxen gehen alle auf der gleichen Linie. Hier ist, was ich habe, so weit:

Tut IE9 nicht unterstützt display: inline-flex überhaupt?

Anzahl der Antworten 1 Antworten
Habe ich gesucht um StackOverflow und auch sonst wo zu finden, wenn display: inline-flex; funktioniert im IE9. Ich habe eine Frage, bevor diese, wenn ich Schwierigkeiten hatte, mit dem ausbau eine Breite dynamisch, die Frage hier. Die

white-space: nowrap; und flexbox hat nicht funktioniert in chrome

Anzahl der Antworten 3 Antworten
Letzten update von Chrome bricht white-space: nowrap mit text-overflow: ellipsis; auf eine overflow: hidden element. Wie zu beheben ohne das hinzufügen hart codierte Breite auf name Klasse.. <h1>problem</h1> <div class="container"> <div class="name"> <div class="firstname"> test </div> <div

Zusammenklappbarer flexibler Breite Seitenleiste mit nur CSS

Anzahl der Antworten 3 Antworten
Nehmen wir an ich habe eine zusammenklappbare Feste Breite sidebar, die wie folgt definiert: HTML <div class="container"> <div class="sidebar" id="sidebar"> SIDEBAR </div> <div class="content"> lorem bla bla <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')"> toggle Sidebar </button> </div> </div> CSS body {

Warum keine align-content / align-items, die hier arbeiten?

Anzahl der Antworten 2 Antworten
So dass ich versuche nur, um eine einfache Navigationsleiste, und ich begann das Spiel mit flexbox. Warum nicht align-content hier arbeiten? Ich kann justify-content zu arbeiten, aber ich kann einfach nicht vertikal ausgerichtet ist. Hier ist der

Wie bekomme ich FF 33.x Flexbox-Verhalten im FF 34.x?

Anzahl der Antworten 3 Antworten
Verwenden wir flexbox stark für eine desktop-Anwendung wie suchen die web-app und es hat toll. Aber mit der neuesten Firefox-Developer Edition (35.0a2) das layout verhält sich nicht wie erwartet (es wächst über den viewport): http://tinyurl.com/k6a8jde Dies funktioniert

flexbox-vertikal geteilte container in HALBE

Anzahl der Antworten 3 Antworten
Kann jemand sagen wie kann ich rechts oben container und rechts unten - container haben die gleiche Höhe und die Spaltung des roten Behälter 50-50% vertikal. Egal, was ist der Inhalt im inneren. Ich versuchte, stretching Inhalt

Flexbox-Marge zwischen Kisten

Anzahl der Antworten 1 Antworten
Ich kenne die Margen zwischen flexboxes kann automatisch eingestellt werden, durch die die align-content Eigenschaft, aber ich muss es behoben werden margin-Satz in px. Ich bin auf der Suche nach etwas ähnliches column-gap für multi-Spalten. Hier ist,

Übergang von flex-grow-Elemente in einer flexbox

Anzahl der Antworten 4 Antworten
Ist es möglich, um den übergang der Elemente in einer flexbox? Wenn Sie klicken Sie auf ich möchte, dass alle Elemente, die zu kollabieren, außer der, auf die geklickt wird. Die eine, die angeklickt wird, sollten alle

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

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

Flexbox: 4 Artikel pro Zeile

Anzahl der Antworten 9 Antworten
Ich bin mit einem flex-Feld zur Anzeige von 8 Gegenständen, die Größe dynamisch mit meiner Seite. Wie kann ich erzwingen, dass es zur Aufteilung der Elemente in zwei Zeilen? (4 pro Reihe)? Ist hier ein relevanter Ausschnitt:

Responsive grid in Reagieren Nativen & Flex

Anzahl der Antworten 4 Antworten
Ich bin erstellen wollen, die einfachsten zwei Spalte ListView-grid item | item item | item Sah ich diesen Beitrag über das erstellen der raster und das funktionierte - ListView-grid-in Reagieren Nativen Ich konnte nicht verstehen, wie man

Warum ist nicht Objekt-fit arbeiten in flexbox?

Anzahl der Antworten 3 Antworten
Ich habe mehrere Spalten, die ich bin gleicher Breite mit flex. Jedes enthält img tags, und ich möchte diese Bilder zeigen die object-fit: cover Dimensionierung. CSS: .container { display: flex; flex-direction: row; width: 100%; } .test {

Wie vertikal ausrichten text innerhalb einer flexbox?

Anzahl der Antworten 6 Antworten
Möchte ich nutzen, flex-box, um vertikal ausrichten manche Inhalte innerhalb eines <li> aber nicht mit großem Erfolg. Habe ich online geprüft und viele der tutorials eigentlich eine wrapper-div, das bekommt der align-items:center von der flex-Einstellungen auf der

Position letzten flex-Element am Ende des Containers

Anzahl der Antworten 2 Antworten
Diese Frage betrifft einen browser mit vollständige css3-Unterstützung einschließlich der flexbox. Ich habe ein flex-container mit einigen Elementen in es. Sie sind alle gerechtfertigt flex-start, aber ich will die letzten .end Element, um gerechtfertigt werden zu flex-end.

Warum percentage-Breite-Größe flex-box-Elemente nicht richtig, erhöhen Sie die Breite der Wickeltisch hat eine unbestimmte (d.h. automatische) Breite?

Anzahl der Antworten 4 Antworten
Bitte werfen Sie einen Blick auf dieses snippet: CSS: table { background-color: yellow; box-shadow: inset 0 0 1px red; max-width: 100%; /* You would get similarly strange behavior with collapsing borders: */ /* border-collapse: collapse; */ }

Wie kann ich eine Anzeige machen:flex-container horizontal erweitert mit seinem umschlossenen Inhalt?

Anzahl der Antworten 5 Antworten
Bei der Verwendung von css flexbox den drei wichtigsten Browsern erscheinen, Verhalten sich ganz anders an bestimmten stellen. In diesem Fall bin ich versucht, ein raster zu erstellen der Bilder: <div class="container"> <div class="photo"></div> <div class="photo"></div> <div

Text in flex-container nicht wickeln Sie Sie in IE11

Anzahl der Antworten 8 Antworten
Betrachten Sie den folgenden Codeausschnitt: CSS: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } HTML: <div class="parent"> <div class="child"> Lorem Ipsum is simply

Wie setzen Sie 'display' - Eigenschaft für das flex-Element

Anzahl der Antworten 3 Antworten
Ich versuche zu konvertieren alte layout basiert auf Tabellen und JS auf die neue Flexbox-mit Abwärtskompatibilität, indem die Tabellen für die alten Browser (speziell IE8, IE9 und Opera 10+). Das problem ist, dass es keine display:flex-item zu

jQuery .show () - eine flex-box

Anzahl der Antworten 7 Antworten
Habe ich ein element mit einem flexbox - <ul id="myFlexbox"> div#myFlexbox{ display:flex; } nach verstecken es und zeigen es, es wird versaut. $('#myFlexbox').show(); nun das element verfügt über ein display-block anstelle von flex. <ul id="myFlexbox" style="display: block;">

Overflow-Eigenschaft funktioniert nicht in IE 11

Anzahl der Antworten 1 Antworten
Mein code unten funktioniert in den meisten Browsern (Chrome, Firefox, Safari, Edge), aber scheint nicht zu funktionieren, in IE11. Bin ich beim Lesen über die Bekannten Probleme bei caniuse, aber es scheint nicht zu etwas zu sagen,

Vertikales Ausrichten - IE10-Flex-box nicht funktioniert

Anzahl der Antworten 2 Antworten
Habe ich meine Mitte ausrichten funktioniert in allen Browsern, die es unterstützen, abgesehen von IE10. Ich denke, dass ich die syntax korrekt ist, und dass es unterstützt es. Könnte mir jemand helfen? DEMO html { height: 100%;

Wie geben Sie ein flex-Element werden bestimmte minimale Breite?

Anzahl der Antworten 1 Antworten
Ich versuche zu verwenden display: flex, aber einige inline-blocks sollte nie verkleinert werden. Ich bin mir nicht sicher, wie Sie Sie zu erreichen, dass. Hier ist eine repro der meine situation: CSS: .marker { width: 2em; height:

Wie Rechtsbündig flex-Element?

Anzahl der Antworten 12 Antworten
Gibt es eine mehr flexbox-ish Weg nach rechts ausrichten "Kontakt", als position: absolute? CSS: .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; }

flexbox funktioniert nicht (die Bestellung) auf iOS

Anzahl der Antworten 1 Antworten
Ich habe eine <ul> die mehrere Liste-alle Elemente, die ein Bild enthält. Die <ul> zeigt horizontal auf größeren Bildschirmen, aber auf mobilen zeige ich die list-Element-2 von 2. Ursprünglich habe ich diese mit float:left; width: 50%; auf

Vertikal ausrichten-Spalte in der Zeile in Ionic

Anzahl der Antworten 1 Antworten
Habe ich Folgendes ion-view : <ion-view view-title="Success" ng-controller="successController" class="success-view"> <ion-content> <div class="row row-center"> <div class="col"> <h1>Success!</h1> <h3>Your login credentials will be SMSed to you shortly</h3> <button class="button button-block button-positive" ui-sref="login"> Okay </button> </div> </div> </ion-content> </ion-view> Ich

Block-Elemente nur innerhalb des flex-Element?

Anzahl der Antworten 3 Antworten
Anscheinend können Sie nur block-Elemente (inline, inline-block float: nichts funktioniert) in einem flex-Element-container? Das ist einfach seltsam und scheint nicht sinnvoll, es sei denn, ich mache es komplett falsch? Hier ist der Stift: http://codepen.io/iaezzy/pen/GggVxe .fill-height-or-more { min-height:

Flexboxes ausrichten nebeneinander, obwohl die Breite auf 100% eingestellt ist

Anzahl der Antworten 2 Antworten
Sorry für den schlechten Titel, ich bin mir nicht sicher, wie zu erklären, mein problem besser. Bitte fühlen Sie sich frei, es zu ändern, in etwas besser. Außerdem bin ich neu flexboxes, die macht es schwieriger zu

margin-top nur bei der flex-Element gewickelt ist,

Anzahl der Antworten 1 Antworten
Ich habe ein flex-container mit zwei flex-Elemente. Ich möchte, um einen margin-top auf die zweite, aber nur, wenn es verpackt und nicht bei der ersten flex-line. Wenn möglich, möchte ich vermeiden Sie die Verwendung von media queries.

firefox overflow-y nicht das arbeiten mit verschachtelten flexbox

Anzahl der Antworten 1 Antworten
Ich soll 100% Breite, 100% Höhe Layouts mit css3 flexbox, die funktioniert sowohl auf IE11 (und wahrscheinlich auf IE10 wenn die emulation von IE11 korrekt ist). Aber Firefox (35.0.1), overflow-y nicht funktioniert. Wie Sie sehen können, in

Warum nicht einfach flex-Elemente verkleinern Vergangenheit Größe des Inhalts?

Anzahl der Antworten 1 Antworten
Ich habe 4 flexbox-Spalten und alles funktioniert Prima, sobald ich aber einen text hinzufügen, um eine Spalte und legen Sie es auf eine große Schriftgröße, macht auch die Spalte breiter als es sein sollte, durch die flex-Eigenschaft.

Wie halte ich zwei side-by-side-divs die gleiche Höhe?

Anzahl der Antworten 21 Antworten
Habe ich zwei divs nebeneinander. Ich möchte die Höhe von Ihnen werden die gleichen, und die gleichen bleiben, wenn einer von Ihnen ändert. Ich kann nicht herausfinden this one out wenn. Ideen? Zu klären, meine verwirrende Frage,

Verhindern, dass ein flex-Elemente Höhe von erweitert, um mit anderen flex-Elemente

Anzahl der Antworten 3 Antworten
Habe ich zwei Elemente in einem container, die side-by-side mit flex-box. Auf dem zweiten element (.flexbox-2), ich bin festlegen es ist die Höhe in der CSS. Doch dann das erste element (.flexbox-1) entspricht die Höhe der .flexbox-2.

Flexbox auf IE11: Bild gestreckt ohne Grund?

Anzahl der Antworten 6 Antworten
Ich habe ein Problem mit flexbox auf IE11 und während ich bin mir bewusst, es gibt viel bekanntes Problem, ich habe nicht in der Lage, eine Lösung zu finden... <div class="latest-posts"> <article class="post-grid"> <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />

Was ist der Unterschied zwischen display:inline-flex und display:flex?

Anzahl der Antworten 6 Antworten
Ich versuche vertikal ausrichten Elemente innerhalb einer ID wrapper. Ich gab die Eigenschaft display:inline-flex; auf diese ID als der ID wrapper ist der flex-container. Aber es gibt keinen Unterschied in der Darstellung. Ich erwartete, dass alles in

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

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

Pflegen Bild-Seitenverhältnis beim ändern der Höhe

Anzahl der Antworten 8 Antworten
Verwendung der CSS-flex-box-Modell, wie kann ich die Kraft, ein Bild zu halten sein Seitenverhältnis? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Beachten Sie, dass die Bilder vergrößern oder verkleinern, um zu füllen die Breite des Containers. Das ist in Ordnung, aber

Flex-Elemente ignorieren Prozent Polsterung in Firefox

Anzahl der Antworten 4 Antworten
Ich versuche, hinzufügen Polsterung an ein element in einem display:flex element. Wenn die Polsterung ist definiert als ein Prozent, es nicht angezeigt wird in Firefox, obwohl es nicht definiert, wenn in px. Beiden Fällen erwartungsgemäß in Chrom.

Wie center ein flex-container, sondern Links-align flex-Elemente

Anzahl der Antworten 2 Antworten
Möchte ich die flex-Elemente zentriert werden, aber wenn wir eine zweite Linie, haben 5 (ab Bild unten), unter 1 und nicht zentriert in der übergeordneten. Hier ein Beispiel von dem, was ich habe: CSS: ul { display:

Zu machen, wie die flexbox-Kinder 100% der Höhe Ihrer Eltern?

Anzahl der Antworten 9 Antworten
Ich versuche zu füllen, der vertikale Abstand von einem flex-Element innerhalb einer flexbox. CSS: .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex:

Wie um zu verhindern, dass Inhalte aus re-sizing ein flex-Element?

Anzahl der Antworten 1 Antworten
Ich bin mit CSS flexbox, um zu bauen eine skalierbare, responsive grid. Wenn Sie ein Google Diagramm, um eine der flexbox-Elemente, das Element mit der änderung der Größe immer so leicht. Es ist genug, um zu werfen