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 in IE10
1 Antworten
Ich versuche, flex-box funktioniert in IE10, aber es funktioniert nicht. Safari, Chrome und Firefox funktionieren, aber IE10 nicht will arbeiten. Weiß jemand die Antwort? codepen: http://codepen.io/anon/pen/vcEGH/ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well)
warum ist nicht mein flexbox-flex-stretch-Eigenschaft arbeiten?
1 Antworten
Ich versuche, die drei flex-Kinder-Boxen zu Strecken mit flexbox, den container zu füllen, so dass alle drei Boxen sind die gleiche Größe. Aber ich will nicht, dass die ersten beiden in Kartons zu dehnen - ich will
Flex-element ignorieren child-element
4 Antworten
Ist es möglich, eine flex-element ignorieren, ein Kind-element, so ist es die grösse hat keinen Einfluss auf die anderen Elemente? Zum Beispiel habe ich einen wrapper mit display: flex. Es hat einen header, Inhalt und Fußzeile. <div
Wie verwenden von flex-grow in Bootstrap v4?
1 Antworten
In der doc und die Probleme der Bootstrap v4 (hier) Ich kann nicht sehen, jeder plan auf die Unterstützung von "flex-grow", etwas mit einer syntax wie in diesem Beispiel: <div class="d-flex"> <div class="flex-grow"> I use all the
wie man verschachtelte flexboxes Arbeit
3 Antworten
Habe ich ein kleines Beispiel für eine geschachtelte flexbox-setup: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/ <div class="box fullSize"> <div class="boxHeader">HEADER</div> <div class="boxContent"> <div class="box fullSize"> <div class="boxHeader moregreen">INNER HEADER</div> <div class="boxContent red">CONTENT CONTENT CONTENT</div> <div class="boxFooter moreblue">INNER FOOTER</div> </div> </div> <div class="boxFooter">FOOTER</div>
IE11 flexbox max-width und margin:auto;
3 Antworten
Habe ich eine einfache flexbox-container mit zwei Elementen: <div id='container'> <div id='first-item'>first item</div> <div id='second-item'>second item</div> </div> Das erste Element hat die flex-grow: 1 und max-width auf 200px. Das zweite Element hat margin-left: auto; ausgerichtet sein Recht
CSS Flexbox für 2-spaltig und 3-Spalte auf desktop-und Mobilgeräten (wrap)
2 Antworten
Ich habe eine echte harte Zeit, herauszufinden, diese CSS-flexbox-Lösung. Im Grunde genommen sind es 2 Probleme, eines mit einem 2-Spalte und ein weiteres mit einem 3-Spalten-layout. 2-Spalte: Ich denke, das kann ziemlich einfach sein 3-Spalte: Dies ist
CSS-flex, wie Sie anzeigen ein Element auf die erste Zeile und zwei in der nächsten Zeile
1 Antworten
Dies ist eine ziemlich einfache Frage, denke ich, aber ich kann nicht 3 items im flex-container für die Anzeige in 2 Zeilen, eine in der ersten Reihe und die anderen 2 in der zweiten Zeile. Dies ist
Simulieren display: inline in Reagieren Nativen
3 Antworten
Reagieren Native nicht-Unterstützung der CSS - display Eigenschaft, der standardmäßig alle Elemente verwenden Sie das Verhalten display: flex (keine inline-flex). Die meisten nicht-flex-layouts kann simuliert werden, mit flex-Eigenschaften, aber ich bin nervös und inline-text. Meine app hat
Bootstrap-4 navbar mit 2 Zeilen
2 Antworten
Habe ich eine Navigationsleiste mit Bootstrap-4 alpha 6, die eine große Marke/Symbol auf der linken Seite, und 2 navbar-nav ' s mit links, rechts neben dem Symbol. Eine nav-links, und den anderen nav-Symbole. Es funktioniert genau so,
ionic-2 vertikale Ausrichtung mit Ionen-Gitter
3 Antworten
Ich habe 2 buttons in einem Bild Ionic 2, und ich will richten Sie Sie beide zusammen (einer auf der Oberseite des anderen, aber zusammen) in der Mitte des Bildschirms (horizontal und vertikal). Ich will Ionen-Gitter, keine
Verhindern, dass flexbox schrumpfen
2 Antworten
Ich bin mit flexbox-layout auf eine Seite, weil die wachsenden Verhalten ist nützlich. Aber ich würde gerne ganz verhindern, dass die schrumpfen Verhalten. Eh zu verwalten? Beispiel-code: <div class="flex-vertical-container"> <div class="flex-box"> This one should grow but not
Breite ignoriert flexbox-Elemente
4 Antworten
http://jsfiddle.net/XW9Se/ Ich habe width: 200px; auf der linken <div> aber wenn ich es mit dem browser-Inspektor-tool scheint es, dass die tatsächliche Breite ist random oder so etwas. Es ändert sich ständig, abhängig von der Fenstergröße. Warum nicht
CSS-Halten Sie alle flexbox-Kinder-Elemente die gleiche Größe
2 Antworten
Meine sass (mit compass, um die Präfixe) ist in diesem fiddle : .container @include display-flex @include flex-wrap(wrap) .item @include flex-grow(1) @include flex-basis(190px) Obwohl, ich möchte die beiden Elemente, die auf der Unterseite die gleichen sein, wie die
Höhe der Zeilen in der CSS Grid Layout
3 Antworten
Entnehme ich, dass dies unmöglich ist zu erreichen mit Flexbox, als jede Zeile kann nur die minimal erforderliche Höhe, um seine Elemente, aber kann das erreicht werden mit den neueren CSS-Grid? Klar zu sein, möchte ich gleich
CSS flexbox funktioniert nicht im IE10
3 Antworten
In IE10, dieser code funktioniert nicht richtig: .flexbox form { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .flexbox form input[type=submit] { width: 31px;
100% Breite in React Native Flexbox
7 Antworten
Ich habe schon gelesen das mehrere flexbox-tutorial, aber ich kann immer noch nicht machen, diese einfache Aufgabe zu arbeiten. Wie kann ich die rote box auf 100% Breite? Code: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives
Wie behält man gewickelte Flex-Items in der gleichen Breite wie die Elemente in der vorherigen Zeile?
7 Antworten
Ich habe eine <ul> das ist eine flex-box und eine Reihe von <li>s, die die flex-items. Ich versuche, das <li> haben eine flexible Breite, das bleibt zwischen zwei Größen mithilfe von min-width und max-width. Es funktioniert sehr
Die Eigenschaft 'justify-content' funktioniert nicht
3 Antworten
Ich habe ein sonderbares Problem, dass ich habe Probleme mit. So habe ich die Arbeit an diesem Prototyp html5-Vorlage, die verwendet flexbox. Obwohl ich habe ausgeführt in ein kleines problem. Ich versuche, einen kleinen Raum in der
CSS flexbox dynamische Größenanpassung: bevorzugen Sie maximale Breite
1 Antworten
Habe ich eine Zeile flexbox-container umschließt. Auf die Elemente, die ich eingestellt: flex: 1; so Elemente wachsen zu füllen horizontaly die container min-width: X; max-width: Y;' so Elemente bleiben in einem akzeptablen Größe. Hier ist eine einfache
Ändern Sie den Richtungsfluss von CSS-Spalten
3 Antworten
Also ich habe CSS so: #blogPosts{ -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; column-count: 3; column-gap: 10px; width: 100%; } schafft 3 Spalten perfekt, aber wenn ich einen weiteren Zeile die Reihenfolge scheint zu kommen, der
Was genau setzt Flex-Basis-Eigenschaft?
1 Antworten
Gibt es einen Unterschied zwischen Einstellung max-width oder width zu einem flex-Element anstelle des flex-basis? Ist es die "Sollbruchstelle" für die flex-grow/shrink Eigenschaften? Und wenn ich flex-wrap: wrap wie funktioniert der browser entscheidet dann, an welcher Stelle
Flexbox-Spalten und IE
2 Antworten
Funktioniert alles wunderbar, in Chrome-und Firefox-aber guess what, ich habe ein problem im IE! (IE11) In meinem responsive layout-Menü "ich möchte" zu werden im pc-Modus horizontale und vertikale tablet - /mobile-Modus. Es macht genau das, aber im
CSS Flexbox-Thema: Warum ist die Breite meiner Flex-Kinder von ihrem Inhalt betroffen?
1 Antworten
Die 2 Kinder meiner flexbox-beide erhalten ein Stil von box-flex: 1. Mein Verständnis ist, dass Ihre Breite sollte dann einander gleich (beide besetzen 50% der gesamten Breite Ihres übergeordneten flexbox). Aber wenn Inhalt Hinzugefügt wird, um die
Warum streckt Flexbox mein Bild?
2 Antworten
Flexbox hat dieses Verhalten, wo es streckt sich Bilder, die zu Ihrer natürlichen Höhe. Bei anderen (mehr spezifischen) Wörter, wenn ich einen flexbox-container mit einem Kind Bild und ich verkleinere die Breite des Bildes, die Höhe spielt
So zentrieren Sie den Inhalt eines Flexbox-Elements vertikal
1 Antworten
Ich versuche, mich zu zentrieren, den INHALT eines flexbox-Element, während mit justify-content:stretch; Es scheint, dass der alte trick mit display:table-cell;vertical-align:middle; funktioniert nicht in dieser situation. Was? .flex-container { display:flex; align-items:center; justify-content:stretch; } .flex-item { align-self:stretch; } <div
Wie stelle ich einen Flex-Container auf die Breite seiner Flex-Items ein?
3 Antworten
Ich habe ein flex-container mit justify-content: flex-start. Es endet als überlauf auf der rechten Seite durch die flex-Elemente nehmen weniger Platz als die Größe des Containers. Abgesehen von der Möglichkeit, eine explizite Breite des flex-container, gibt es
Flexbox zentriert nicht vertikal in IE
8 Antworten
Habe ich eine einfache web-Seite mit einigen Lipsum Inhalte, die auf der Seite zentriert ist. Die Seite funktioniert in Chrome und Firefox. Wenn ich reduzieren die Größe der Fenster, der Inhalt füllt sich das Fenster, bis es
Multiline-Flexbox in IE11 Berechnung der Breiten falsch?
4 Antworten
Scheint IE11 nicht berechnen, flex-Element-breiten richtig, wenn flex-wrap: wrap verwendet wird. Sehen http://jsfiddle.net/MartijnR/WRn9r/6/ Die 4 Boxen jeweils über flex-basis: 50%, damit wir bekommen sollte zwei Linien von zwei Boxen je, aber im IE11 jede box bekommt eine
Wie kann ich jedes Kind unabhängig (links, rechts, Mitte) rechtfertigen?
2 Antworten
In reagieren native habe ich: <View style={styles.navBar}> <Text>{'<'}</Text> <Text style={styles.navBarTitle}> Fitness & Nutrition Tracking </Text> <Image source={icon} style={styles.icon}/> </View> mit diesen styles: { navBar: { height: 60, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, navBarTitle: { textAlign:
Spannleinen ohne '-webkit-line-clamp'
2 Antworten
In den guten alten Tagen gab es einen Stich in webkit für Spann-Linien mit reinen css: display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; Obwohl diese syntax glücklich koexistiert mit der display: -webkit-flex syntax in allen modernen webkit-basierten Browser,
IE10 Flexbox P-Element ohne Umwicklung
5 Antworten
http://jsfiddle.net/pvJRK/2/ Grundsätzlich in IE10 ein p-element, welches den text, der breiter als die Eltern, wenn die "Richtung", ist eine Zeile überläuft, und anschließend drücken Sie auf eine beliebige andere Geschwister aus dem container. Die Hülle scheint gut
Flex-Box: Richte die letzte Reihe an das Gitter aus
16 Antworten
Habe ich eine einfache flex-box-layout mit einem container wie: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Jetzt möchte ich die Elemente in der letzten Zeile ausgerichtet werden, mit den anderen. justify-content: space-between; sollte verwendet
Reagiere nativen Text, der von meinem Bildschirm verschwindet, und weigere mich, ihn zu umbrechen. Was ist zu tun?
6 Antworten
Den folgenden code kann gefunden werden in dieses live-Beispiel Habe ich das folgende reagieren nativen element: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function()
Reactive Native absolute Positionierung horizontale Mitte
4 Antworten
Scheint es, dass mit position:absolute in ein element verwenden, können nicht zentriert werden mit justifyContent oder alignItems. Es gibt einen workaround zu verwenden marginLeft aber nicht angezeigt, das gleiche für alle Geräte, auch mit Dimensionen zu erkennen,
Was ist der Unterschied zwischen align-content und align-items?
7 Antworten
Kann jemand mir zeigen den Unterschied zwischen align-items und align-content? InformationsquelleAutor der Frage Dinh | 2014-12-18
Richte ein Element mit flexbox nach unten aus
3 Antworten
Ich habe eine div mit einigen Kindern: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> und ich möchte das folgende layout: ------------------- |heading 1 | |heading 2 | |paragraph
Abstand zwischen Flexbox-Elementen
6 Antworten
Dies ist, was ich will: Der nächste, den ich bekommen habe. Anwendung Marge auf flexbox-Elemente, dann entfernen die Hälfte davon aus der ersten & die letzten Kinder. Das problem ist, dass :first-child ist nicht immer der erste
CSS flexbox vertikal / horizontal zentriertes Bild OHNE explizit definieren übergeordnete Höhe
2 Antworten
Mit nur die Eltern div und das Kind img Elemente, wie unten gezeigt, wie kann ich vertikal und horizontal center der img element, während ausdrücklich nicht Definition der height des übergeordneten div? <div class="do_not_define_height"> <img alt="No, he'll
Flexbox - Justiere links und rechts auf derselben Linie
1 Antworten
Situation: Habe ich eine einfache Navigationsleiste, die ich Baue in Flexbox. Ich möchte eine float-Element nach Links und halten Sie die andere an den rechten. Beispiel: <nav> <ul class="primary-nav"> <li><a href="#" id="item1">ListItem1</a></li> <li><a href="#" id="item2">ListItem2</a></li> <li><a href="#"
Was bedeutet flex: 1?
3 Antworten
Wir alle wissen, die flex-Eigenschaft ist eine Kurzform für die flex-grow, flex-shrink, und die flex-basis Eigenschaften. Und der Standardwert ist 0 1 auto. Es bedeutet: flex-grow: 0; flex-shrink: 1; flex-basis: auto; aber ich habe bemerkt, in vielen
ist es möglich, Flexbox-Einsätze & amp; entfernt?
2 Antworten
Wenn ich Sie entfernen ein Element aus einer flexbox, die verbleibenden Elemente "einrasten" in Ihren neuen Positionen sofort, anstatt zu animieren. Konzeptionell, da die Elemente verändern Ihre Positionen, ich würde erwarten, dass die übergänge zu bewerben. Habe
Flexbox und Internet Explorer 11 (Anzeige: flex in & lt; html & gt ;?)
3 Antworten
Ich bin Planung, um Weg von "floaty" - layouts und css flexbox für zukünftige Projekte. Ich war erfreut zu sehen, dass alle gängigen Browser in Ihren aktuellen Versionen scheinen zu unterstützen (in die eine oder andere Weise)
Wie kann die Anzahl der Elemente pro Zeile mithilfe von Medienabfragen in Flexbox gesteuert werden?
1 Antworten
So vorstellen, ich habe Folgendes Markup <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> Und die folgenden Stile (SASS) @mixin max-width($width) { @media screen and (max-width:
CSS3 Flexbox behält das Bildseitenverhältnis bei
6 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
Wenn Flexbox-Elemente im Spaltenmodus umbrochen werden, wird der Container nicht breiter
2 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
Unter welchen Umständen wird Flex-Shrink auf Flex-Elemente angewendet und wie funktioniert es?
1 Antworten
Ich habe schon mit diesem schönen CSS Flexbox-demo-Seite und ich verstehe die meisten Begriffe, allerdings war ich nicht in der Lage, um zu sehen flex-shrink in Arbeit. Was auch immer Einstellungen, die ich dort gelten, sehe ich
Anzeige: Inline-Äquivalent in React Native
2 Antworten
Scheint es, als ob ich Probleme mit dem erstellen von display: inline-styling gleichwertig mit flexbox. Bisher habe ich Folgendes erreicht (wo die roten und die blauen Linien werden bestimmt durch die Rand-Funktion, um zu helfen mit dem
IE11 - flexbox und vh height units nicht kompatibel?
1 Antworten
Ich versuche, einen flexbox-basiertes layout um einen sticky footer für meine Seite. Dies funktioniert gut in Chrome und Firefox, aber im IE11 der footer sitzt genau nach meinem wichtigsten Inhalte. In anderen Worten die wichtigsten Inhalte nicht
Füllen Sie den verbleibenden vertikalen Platz mit CSS mit display: flex
2 Antworten
In einem 3-Zeilen-layout: in der oberen Zeile so groß sein sollte nach seinem Inhalt der unteren Zeile sollte eine Feste Höhe in Pixel der mittleren Zeile erweitern soll, den container zu füllen Das problem ist, dass die