Tag: flexbox

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

Ich habe seit kurzem das spielen mit Flexbox für die erste Zeit und, im Allgemeinen, es ist absolut erstaunlich. Ich angetroffen habe ein Problem vor kurzem wo aber ich kann nicht scheinen zu geben, flex-Elemente, die wickeln

Nach der Realisierung der wunderbaren Fähigkeiten des display:flex habe ich eine web-Seite, die genauso aussieht, wie ich möchte, dass es bei der Betrachtung von Chrome 26 für Windows. Jedoch, es funktioniert nicht in Chrome 26 auf meinem

Habe ich ein Komplexes layout, wo ich Mitte verschiedenen Elemente vertikal und horizontal mit flexbox. Das Letzte element hat dann margin-right:auto; angewendet, um die push-Elemente, die Links (und negieren zentrieren Sie). Diese korrekt funktioniert überall, außer auf

In den alten Tagen hätte ich noch zwei Container und schwebte einer Links und der andere rechts mit clearfix. Aber ich denke, die Methode ist ein bisschen antiquiert, mit flex-Funktionen werden gut unterstützt. Problem ist, ich habe

Ich möchte, dass meine Daten in Spalten angeordnet sind (von oben nach unten, von Links nach rechts) und jede Position innerhalb der Daten beginnen soll eine neue Spalte. Es gibt drei Einschränkungen: Verwenden müssen, flex (ich brauchen,

<div class="parent"> <div class="child1"> question </div> <div class="child2"> somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething <div class="parent"> <div class="child1"> question </div> <div class="child3"> somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething </div> </div> CSS .parent{ width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; padding:1em; background-color:red; box-sizing:border-box; } .child1{ background-color:mistyrose; padding:1em; } .child2{ background-color:powderblue; padding:.5em;

Angesichts dieser markup : <div class="foo"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> Und CSS: .foo { display: flex; flex-wrap: wrap; } .a { flex: none; width: 50%; height: 100px; background: green; } .b { flex: none;

Wie mache ich mein flex-Element (article in diesem Beispiel), die hat flex-grow: 1; nicht zu überlaufen, es ist flex-Eltern/container (main)? In diesem Beispiel article ist nur text, obwohl es möglicherweise andere Elemente enthält (tables, etc). CSS: main,

Habe ich ein text-element innerhalb einer view: <View><Text>hello world foo bar</Text></View> als Teil eines flex-grid. Möchte ich diese Ansicht, um die automatische Breite basierend auf dem Inhalt, d.h. der Länge des Textes. Wie kann ich das erreichen?

Ich versuche, passen die Bilder in der mit Blick auf, so dass ich einen nahtlosen grid von Bildern. Das problem ist, dass resizeMode='contain' zu passen scheint, um die Breite des Bildschirms oder zumindest einige höhere level-container, muss

Ich habe eine flexbox-layout enthält zwei Elemente. Einer von Ihnen verwendet padding-bottom : CSS: #flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid

Ich versuche zu schaffen, ein flexibles layout in CSS3 mit 3 Boxen übereinander stapeln. Die Boxen sind Geschwister und haben somit die gleichen Eltern-element. Die Höhe der ersten box müssen passen Ihren Inhalt. Die Höhe der beiden

Habe ich angefangen mit flex und ich Liebe, wie es funktioniert. Ich bin mit flex-layout und ich möchte die btn-group Klasse in dashboard-body zu gehen, die volle Breite des übergeordneten Elements. Jetzt seine Breite ist gleich sowohl

Habe ich eine horizontale flex-box (d.h. flex-direction: row, also side-by-side) mit ein paar items. Jedes Element kann eine einzelne Zeile text oder mehrere Zeilen. Ich möchte die vertikal-richten Sie den Inhalt der einzelnen flex-Element. Wenn jedes Element

Ich habe einen container <div> mit display: flex. Es hat ein Kind <a>. Wie kann ich das Kind jetzt "inline"? Speziell, wie kann ich als Kind Breite, bestimmt durch Inhalte, und nicht zu erweitern, um die Breite

Ich wollen Mitte ein Blick in ein anderes ein in Reagieren Nativen. Dies ist mein code: const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', }, outerCircle: { backgroundColor: 'blue',

Wie Sie sehen können, die list-items im ersten row haben gleiche height. Aber die Elemente in der zweiten row haben unterschiedliche heights. Ich will alle Objekte haben eine einheitliche height. Gibt es eine Möglichkeit, dies zu erreichen,

Ich versuche, flexbox bauen einer responsive-raster mit gleich großen Zellen. Mein code funktioniert, wenn der Inhalt der Zellen ist dieselbe, aber nicht, wenn die Inhalte der Zellen in der Länge variiert werden - die Zellen neu zu

Ich brauche neues layout erstellen, das enthält Liste der Elemente in zwei Spalten. Wie ich gezeigt unten: CSS: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item {

Angesichts dieser scss/css: div.container { display:flex; flex-flow: row wrap; justify-content:space-between; border: 1px solid blue; div { width: 200px; border: 1px solid gray; display:inline-block; text-align: center; } } Dieses layout ist das erste Element in jeder Zeile Links

Beispiel: CSS: div { display: flex; height: 200px; background: tan; } span { background: red; } HTML: <div> <span>This is some text.</span> </div> Ich habe zwei Fragen, bitte: Warum ist es im Grunde geschehen, um die span?

Ich in ein Problem mit flexbox in IE11. Bei der Verwendung von flex-direction: column die flex-Elemente überlappen: In anderen Browsern (chrome, safari) sieht es wie folgt aus: Dies ist der css: .container { display: flex; flex-direction: column;

In den code und jsfiddle unten flexbox Proportionen verändert sich mit Inhalt. Ich bin Gefühl, das ich nicht verstehen den wahren Sinn des flexbox hier. Wenn wir geben flex-grow Eigenschaften für die Proportionen, die wir wünschen, ist,

In der letzten Spalte der ersten Zeile wird umgebrochen in die nächste Zeile bei der Anzeige in Safari und einige andere iOS-basierte Browser. Safari: Chrom /Andere: Code: CSS: .flexthis { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: