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.
Flexbox-layout funktioniert nicht im Internet Explorer 10
2 Antworten
http://jsfiddle.net/J8rL7/87/ Laut http://caniuse.com/#feat=flexbox Sollte es für den IE10 mit vendor-Präfix. Aber es funktioniert nicht! UPDATE: Und ich habe gerade überprüft, die in aktuellen Firefox sieht es Total kaputt. Warum? <div id="wrapper" style="margin:auto;background-color:yellow;height:100%;"> <div style="width:50px;height:100%;"> <div class="fluid-column" style="height:80%;background-color:green;">
Bewegen Sie dann das Letzte element, um die nächste Zeile in ein flex-container
2 Antworten
Habe ich diese Struktur in meinem HTML-code: <div style="display:flex"> <div class="div_first">1</div> <div class="div_second">2</div> <div class="div_third">3</div> <div class="div_next_line"> <div class="div_first">4</div> <div class="div_second">5</div> <div class="div_third">6</div> </div> </div> Ist es möglich, die 4 5 6 in der zweiten Zeile mit
Flex React Native — Wie der content Pause zur nächsten Zeile mit flex, wenn Sie Inhalte an edge
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
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?
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
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
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?
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
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
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
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?
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?
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
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
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?
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?
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
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
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
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?
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
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
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?
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?
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
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?
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?
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
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
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
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
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
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?
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?
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
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
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?
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
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,
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
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?
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?
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
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?
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?
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
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
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
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
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: