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.
Ein grid-layout mit ansprechenden Plätzen
3 Antworten
Ich bin zu wollen, erstellen Sie ein grid-layout mit ansprechenden Plätzen. Ich das Gefühl, ich sollte in der Lage sein, dies zu tun mit CSS Grid layout aber Probleme beim einstellen der Höhe des Quadrats entspricht der
Margin collapsing in flexbox
1 Antworten
In der Regel in CSS, wenn ein Elternteil und sein letztes Kind haben einen Spielraum, die Margen zusammenbrechen, zu einem einzigen Rand. E. g. CSS: article { margin-bottom: 20px } main { background: pink; margin-bottom: 20px; }
CSS height Problem mit dem flex-box-innen flex-box
3 Antworten
Ich habe ein problem mit flex-Boxen darin enthaltenen flex-Boxen. Die JS-Fiddle auf http://jsfiddle.net/fr077nn2/ die den folgenden code enthält: CSS: #container{ position: absolute; height: 100%; width: 100%; border: 3px solid yellow; } .app { display: flex; flex-direction: column;
IE 11: Bild wird nicht skaliert korrekt in flexbox
2 Antworten
Ich versuche, flexbox, um zwei Bilder in einer Spalte. In diesem Fall, die width div-container kleiner als die width des Bildes. Im Chrome das Bild passt perfekt in den div-container, aber es funktioniert nicht im IE und
Warum flexbox-Element-Bilder skalieren unterschiedlich in Abhängigkeit von Ihrer anfänglichen Größe?
2 Antworten
Habe ich vier Bilder: zwei kleine, zwei große (Maße in html angezeigt). Sie alle haben Ihre img width auf 100% eingestellt, aber Ihre Eltern-div ist festgelegt auf eine bestimmte Breite. Wenn ich die Größe des browser-Fensters die
Wrap-element neue Zeile/Zeile mit flexbox
2 Antworten
Ich Probleme habe, zwingt ein Element in die nächste Zeile in eine flexbox-layout. Wie kann ich etwas tun, wie in der folgenden Abbildung? Dies ist, was ich so weit gekommen: CSS: #wrap { display: flex; width: 86vw;
Tut 'position: absolute' Konflikt mit flexbox?
3 Antworten
Möchte ich ein div-stick auf der Oberseite des Bildschirms, ohne Einfluss auf andere Elemente, und seine untergeordneten Elemente in der Mitte. CSS: .parent { display: flex; justify-content: center; position: absolute; } HTML: <div class="parent"> <div class="child">text</div> </div>
Gibt es eine Möglichkeit, Sie zu stapeln divs übereinander mit flexbox-syntax?
2 Antworten
Flexbox-Problem. Hoffentlich kann mir jemand helfen 🙂 Ich versuche zu bauen, ein deck von Karten aus divs und stapeln Sie diese übereinander, wie Sie es mit position:absolute. Gibt es eine Möglichkeit zu bekommen divs überlagern einander im
min-height 100vh schafft vertikale scrollbar, auch wenn Inhalt kleiner als der viewport
2 Antworten
Ich bin auftragen min-height: 100vh; zu einem flexbox-container, und ich bekomme eine vertikale Bildlaufleiste verwenden, wenn ich justify-content: space-around; Ich nicht wollen, zu zwingen, die Höhe, aber ich verstehe nicht, warum die scrollbar ist da, weil der
Pin element (flex-Element) bis zur Unterseite der container
5 Antworten
Ich habe einen container um das ganze Fenster Höhe/Breite. Innerhalb dieses Containers möchte ich ein Formular mit vertikal & horizontal zentriert. Unten, ich will auch ein Stück der Kopie auf der Grundlinie des Containers. Ähnlich wie die
Flexbox nicht Einfüllhöhe in IE11
1 Antworten
Habe ich in diesem Fall: http://codepen.io/anon/pen/radoPd?editors=110 Dies ist der CSS Code: .wrapper{ background-color: red; min-height: 100vh; display: flex; } .sidebar{ background: orange; flex: 0 0 300px; } .main{ background-color: green; overflow-y: scroll; } Für einige Grund, IE11,
Reagieren-Native: Vermeiden Sie Den Textumbruch
2 Antworten
Habe ich den Titel und die Dauer der Anzeige in einer Zeile. Der song-Titel braucht, um zu zeigen, eine Ellipse, aber die Dauer sollte nie wickeln oder zeigen Auslassungszeichen. Ich habe versucht, mehrere Kombinationen, aber nicht das
Flexbox, responsive raster von quadratischen divs gleichbleibendem Seitenverhältnis
4 Antworten
Ich versuche zu erstellen, die eine 2x2-raster mit divs. Einige der divs könnte ein Bild enthalten, aber es wird wahrscheinlich eingestellt werden, als hintergrund, mit der option background-size: cover. Hier ist die pen habe ich: http://codepen.io/qarlo/pen/vLEprq CSS:
CSS Flexible Box Layout auf dem iPad
1 Antworten
Ich versuche ein sehr einfaches layout mit dem flex-Modell arbeiten auf dem iPad. Habe ich mit einem div soll zentriert content-divs. Den Beispiel-code funktioniert wie vorgesehen für alle Browser und Plattformen AUßER auf dem iPad (retina). Mit
Flexbox-center und in der rechten unteren Element
3 Antworten
Ich versuche zu erreichen, das folgende Ergebnis mit flexbox: Habe ich versucht, das mit dem folgenden html-Code, aber ich kann nicht ankommen es zu wirken. <div class=" flex-center"> <div class="flex-item-center"> <p> Some text in box A </p>
Wie Zeilenumbruch in einer flex-layout?
1 Antworten
Habe ich meine ersten, zweiten und Dritten Elementen, und dann will ich das vierte Element, um auf die nächste Zeile, egal wie breit ist der Raum. CSS: .box { display: flex; flex-flow: row wrap; justify-content: space-around; align-items:
align-self: flex-end funktioniert nicht in der flexbox
1 Antworten
Bin ich mit "Milligramm.css" (eine micro-CSS-framework). Ich ausrichten möchten, ein DIV in einer Spalte nach unten. Aber nichts passiert, der DIV ist immer top ausgerichtet. https://jsfiddle.net/fb8ydfcy/3/ CSS: .column { border: 1px solid red; } .col-bottom { border:
Warum rechtfertigen nicht-Inhalte: zentriert im IE funktioniert?
2 Antworten
Ich habe diese einfache div mit einem Knopf innen. justify-content: center; funktioniert einwandfrei mit Firefox und Chrome, aber nicht auf IE 11: CSS: #div { height: 200px; width: 50px; border: 1px solid black; display: flex; flex: 0
Flex-items haben die gleiche Breite in einer Zeile
3 Antworten
Wenn Sie sich das Beispiel unten möchte ich die Kopfzeilen (h4.child-title) gleiche Länge haben innerhalb des übergeordneten Containers. Aber ich bin mir nicht gelungen, dieses Ziel zu erreichen. Jede Hilfe ist willkommen. CSS: .top-level { display: flex;
IE10 flexbox-breiten, die padding, wodurch überlauf. box-sizing: border-box nicht fix
5 Antworten
LS flex Kind in diesem Beispiel hat 1em padding, und es wird dazu führen, RS überlauf der Eltern: <div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black"> <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size:
Flexbox-100% height Problem
2 Antworten
Habe ich die folgenden links... aber das hilft mir nicht... wie man verschachtelte flexboxes Arbeit Höhe 100% auf flexbox-Spalte Kind Zu machen, wie die flexbox-Kinder 100% der Höhe Ihrer Eltern? Brauche ich eine Seite, die responsive ist,
html5: drei-Zeilen flexbox mit fixed top/bottom und scrollbare Mitte
1 Antworten
Ist es möglich, einen html5 flexbox-layout mit festen header/footer und ein scrollbares article Abschnitt wie den folgenden für firefox 24 und Chrom 31? +----------+ | header | +----------+ | article || | || | || | ||
Zum deaktivieren der Höhe Spalten in Flexbox?
3 Antworten
Habe ich drei Elemente, die ich versuche auszurichten, die in meinem layout. Zuerst habe ich ein div für das feedback, und dann eine Suche eingeben, und dann ein div-element für die Vorschläge. Möchte ich die ersten und
Warum kann das nicht <fieldset> flex-Container?
5 Antworten
Ich habe versucht den Stil ein fieldset element mit display: flex und display: inline-flex. Aber es hat nicht funktioniert: flex benahm sich wie block, und inline-flex benahm sich wie inline-block. Dies geschieht sowohl auf Firefox und Chrome,
Wie man eine Feste Breite Spalte mit einem container-fluid?
2 Antworten
Ich versuche eine Seite der Spalte auf der linken Seite mit fester Breite, und klicken Sie dann auf der rechten Seite eine normale Bootstrap -container-fluid. Selbst wenn die sidebar befindet sich nicht in der Bootstrap-Struktur, ist es
Besseren Weg, um Abstand zwischen flexbox-Elemente
36 Antworten
Einstellen der minimalen Entfernung zwischen dem flexbox-items ich bin mit margin: 0 5px auf .item und margin: 0 -5px auf container. Für mich scheint es wie ein hack, aber ich kann nicht finden, einen besseren Weg, dies
Flex-box dynamische Breite und Höhe
5 Antworten
Ich versuche zum erstellen einer Nachrichten-Ansicht mit reagieren,-Muttersprachler, z.B.: Wie Sie sehen können: Die Blasen haben eine dynamische Breite und Höhe auf der Grundlage des Inhalts Gibt es eine maximale Breite für die Blasen und Sie wachsen
In CSS Flexbox, warum gibt es keine "rechtfertigen-Elemente" und "rechtfertigen-selbst" - Eigenschaften?
4 Antworten
Betrachten die Hauptachse und die Querachse von einem flex-container: Source: W3C Ausrichten flex-Elemente entlang der Hauptachse gibt es eine Eigenschaft: rechtfertigen-content Ausrichten flex-Elemente entlang der Querachse gibt es drei Eigenschaften: align-content align-items align-self In dem Bild oben,
Wie kann ich zwei Feste Breite Spalten mit einer flexiblen Spalte in der Mitte?
3 Antworten
Ich versuche zum einrichten einer flexbox-layout mit drei Spalten, wobei die linke und Rechte Spalte haben eine Feste Breite, und die mittlere Spalte beugt, um den verfügbaren Platz auszufüllen. Trotz einrichten der Dimensionen, für die Spalten, Sie
flex-wrap funktioniert nicht wie erwartet in Safari
7 Antworten
Auf der homepage von http://www.shopifyexperte.de/ es gibt zwei flex-box-Module, die man unter "Kundenstimmen" und unter "Neueste Beiträge...". Die inneren Boxen sollen zu wickeln, wenn Sie gehen, unten 220px und nicht wachsen über 30% der Breite. Das funktioniert
Z-stacking CSS-3-Flex-Boxen : wie overlay DIVs, die flexbox-Elemente?
1 Antworten
Nicht stapeln divs beim erstellen einer flexbox-layout. Entweder Sie schieben sich gegenseitig innerhalb der div-container, oder muss ich das mit "position:absolute" auf dem overlay, das bekommt das div aus seiner container-Kontext. z-Indizes scheinen überhaupt nicht funktionieren. Ich
CSS-Flex Box: Wie vertikal ausrichten "flex-items" Mitte-ohne flex-Element Höhe?
4 Antworten
Derzeit meine "flex" - Elemente wie folgt Aussehen (vertikale Ausrichtung: top)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3 _____________________________________ 4 _____________________________________ Mein Ziel ist, dass Sie Aussehen wie diese (vertikale Ausrichtung: Mitte)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3
Durchführen eines Bildlaufs in einer flexbox mit überquellenden Inhalt
5 Antworten
Hier ist der code Ich verwende zur Erreichung der oben genannten layout: CSS: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px;
Flexbox-wrap - unterschiedliche Ausrichtung für die Letzte Zeile
2 Antworten
Ich bin mit flex-box ausrichten, die zwei Elemente Links und rechts neben dem container, während vertikal-Zentrum-Einklang. Hier ist ein sehr einfaches Beispiel, was ich versuche zu erreichen. HTML: <div class="container"> <div class="first"></div> <div class="second"></div> </div> CSS: .container
Reagieren-Tabelle-Spalte mit fester Breite verdirbt gesamte Tabelle
2 Antworten
Kann mir das jemand erklären, warum ich kann nicht fest eingestellt Breite auf Vorname Spalte?Es ist die Einstellung vergangen, Breite, aber es verdirbt den ganzen Tisch.Wenn Sie basteln mit Größenänderung(durch die Maus) die Spalte aus anderen Spalten
Ist es möglich, dass Flexbox-arbeiten, innen Etikett?
1 Antworten
Ich bin mit flexbox-Anzeige einer text-label zusammen mit einem numerischen Wert in eine schmale Spalte, so dass der text abgeschnitten wird mit Auslassungszeichen, wenn es nicht passt. Es funktionierte gut, bis ich hatte das Bedürfnis, setzen Sie
CSS Automatische Breite nicht mit Flexbox
1 Antworten
Grüße Overflowers, Ich habe eine HTML-Seite wie folgt: 1. HTML, BODY, DIVs und Erstreckt sich zurückgesetzt zu haben 0px border, padding, margin und outline 2. HTML, BODY und das DIV-Elementen hat display: -webkit-flex und -webkit-flex: 0 0
Mit position: relative im inneren ein flex-container
1 Antworten
Mache ich eine Vorschau der post, wie seine text-und Bild-als hintergrund-mit einigen filtern. Das problem ist, dass ich will das gesamte div nicht 1300px, aber nur 650px. Jedoch, diese Art und Weise will ich nicht in der
Flexbox-Körper-und main-min-height
1 Antworten
https://jsfiddle.net/vz7cLmxy/ Ich versuche, über den Körper zu erweitern, aber die min-height funktioniert nicht. Ich habe gelesen, andere Verwandte Themen, aber nicht bekommen kann meinen Kopf um ihn herum. CSS-und html - CSS: body, html { padding: 0;
flex-Eigenschaft funktioniert nicht in IE
5 Antworten
Ich nicht in der Lage gewesen, um festzustellen, warum flexbox funktioniert nicht im IE 11. Zum testen, ich bezogen eine sehr einfache flexbox-layout von CodePen und eingefügt haben die unten stehenden Informationen. Chrome funktioniert wie vorgesehen; IE11
CSS3-inline-flexbox, mit ul-Liste?
1 Antworten
Ich versuche zum einrichten eines Links meny, wo die li Elementen zu Strecken, um die gesamte Höhe des Bildschirms, unabhängig von der Größe des Bildschirms. Kann ich nicht über die li-Elemente füllen die ganze Höhe des Bildschirms
Vertikal zentrieren einer div in einem anderen div
5 Antworten
Ich versuche vertical-align: middle ein div in einem anderen div, aber aus irgendeinem Grund funktioniert es nicht richtig. Was mache ich falsch? CSS: #wrapper { border: 1px solid red; width: 500px; height: 500px; } #block { border:
Chrome / Safari keine Füllung 100% Höhe der flex-Eltern
4 Antworten
Ich möchte ein vertikales Menü mit einer bestimmten Höhe. Jedes Kind ausfüllen müssen, die Höhe der Eltern-und haben Mitte ausgerichteter text. Die Anzahl der Kinder ist zufällig, so habe ich zu arbeiten mit dynamischen Werten. Div .container
Wie erstelle ich ein 3x3-raster über CSS?
5 Antworten
Gegeben 9 divs einer nach dem anderen, erstellen Sie ein raster 3X3 via CSS. Wie mache ich das? CSS: .cell { height: 50px; width: 50px; background-color: #999; display: inline-block; } .cell:nth-child(3n) { background-color: #F00; /* what property
Wie stretch-flex-Kind zu füllen, die Höhe des Containers?
4 Antworten
Muss ich dehnen gelb Kind zu füllen die ganze Höhe des übergeordneten Elements. Ohne Einstellung der Eltern Höhe. Höhe Eltern sollten davon abhängig sein, blau Kind text. https://jsfiddle.net/7vaequ1c/1/ HTML: <div style='display: flex'> <div style='background-color: yellow;height: 100%; width:
Wie zu erstellen "zusammengebrochen" Grenzen rund um flex-Elemente und Ihre container?
5 Antworten
Habe ich das folgende layout: CSS: #limited-width { width: 100%; max-width: 200px; margin: 0 auto; font-size: 18px; } ul { display: flex; flex-flow: row wrap; list-style: none; padding: 0; margin: 20px; } ul > li { display:
Untergeordnete Elemente erweitern, die außerhalb übergeordneten element mit flex
3 Antworten
Habe ich verwendet CSS-flex für die Anzeige von zwei divs nebeneinander sind, die sich im inneren wrapper und ich habe versucht, so dass im inneren #myClippetWrapper ist, wo ich die Höhe, also in die child-Elemente von #myClippetWrapper
Wie zu zwingen, die Teilung in gleiche Teile mit flexbox
2 Antworten
In eine dom-Struktur wie diese: <div id="1"> <div id="2"> <div id="3"> </div> </div> <div id="4"> <div id="5"> </div> </div> </div> mit css wie folgt angegeben: #1{ display: flex; flex-direction: row; } #2, #4{ flex: 1; } Des
Flexbox: center horizontal und vertikal
10 Antworten
Wie center div horizontal und vertikal innerhalb des Containers mit flexbox. Im unten angeführten Beispiel, ich will jede Zahl, die untereinander (in Zeilen), die horizontal zentriert. CSS: .flex-container { padding: 0; margin: 0; list-style: none; display: flex;
Platzieren ein div unter anderen (mit flexbox)
3 Antworten
Ich versuche, legen Sie die timeAgo d.h. 22 seconds ago Inhalte nur unter der info Inhalt. Aber, für das styling verwende ich, timeAgo getrieben, nach rechts. Hier ist mein markup - CSS: .container { overflow:auto; } .post