Als «flexbox» getaggte Fragen

CSS-Modul für flexible Layouts, das eine breite Palette von Optionen zum Ausrichten von Elementen bietet und gleichzeitig Floats und Tabellen überflüssig macht.

5
Wie mache ich Flexbox-Artikel gleich groß?
Ich möchte eine Flexbox verwenden, die einige Elemente enthält, die alle gleich breit sind. Mir ist aufgefallen, dass die Flexbox den Raum gleichmäßig verteilt und nicht den Raum selbst. Beispielsweise: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div class="item">asdfasdfasdfasdfasdfasdf</div> …
186 css  flexbox 
5
Wenn Flexbox-Elemente im Spaltenmodus umbrochen werden, vergrößert der Container seine Breite nicht
Ich arbeite an einem verschachtelten Flexbox-Layout, das wie folgt funktionieren sollte: Die äußerste Ebene ( ul#main) ist eine horizontale Liste, die nach rechts erweitert werden muss, wenn weitere Elemente hinzugefügt werden. Wenn es zu groß wird, sollte eine horizontale Bildlaufleiste vorhanden sein. #main { display: flex; flex-direction: row; flex-wrap: nowrap; …
166 html  css  flexbox 
2
So legen Sie eine Spalte mit fester Breite mit der CSS-Flexbox fest
CodePen: http://codepen.io/anon/pen/RPNpaP . Ich möchte, dass das rote Feld nur 25 em breit ist, wenn es nebeneinander angezeigt wird. Ich versuche dies zu erreichen, indem ich das CSS in dieser Medienabfrage einstelle: @media all and (min-width: 811px) {...} zu: .flexbox .red { width: 25em; } Aber wenn ich das mache, …
149 html  css  flexbox 
10
Flexbox-Elemente in der Mitte und rechts ausrichten
Ich hätte gerne A Bund Cin der Mitte ausgerichtet. Wie kann ich Dganz nach rechts gehen? VOR: NACH DEM: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* …
146 html  css  flexbox 
1
Wie kann man Kinder dehnen, um die Querachse zu füllen?
Ich habe eine Links-Rechts-Flexbox: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> Führen Sie das Code-Snippet ausErgebnisse ausblendenErweitern Sie das Snippet Das Problem ist, dass sich das richtige Kind nicht reagiert. Um genau zu sein, …
141 css  flexbox 
2
Nur CSS-Mauerwerkslayout
Ich muss ein ziemlich gewöhnliches Mauerwerkslayout implementieren. Aus einer Reihe von Gründen möchte ich jedoch kein JavaScript verwenden, um dies zu tun. Parameter: Alle Elemente haben die gleiche Breite Elemente haben eine Höhe, die serverseitig nicht berechnet werden kann (ein Bild plus verschiedene Textmengen) Ich kann mit einer festen Anzahl …
134 html  css  flexbox  css-grid 
3
Was bedeutet flex: 1?
Wie wir alle wissen, das flexist Eigentum eine Abkürzung für das flex-grow, flex-shrinkund die flex-basisEigenschaften. Der Standardwert ist 0 1 auto, was bedeutet flex-grow: 0; flex-shrink: 1; flex-basis: auto; aber ich habe bemerkt, an vielen Stellen flex: 1wird verwendet. Ist es eine Abkürzung für 1 1 autooder 1 0 auto? …
127 css  flexbox 
4
Wie werden Flexbox-Spalten links und rechts ausgerichtet?
Mit typischem CSS konnte ich eine von zwei Spalten links und eine andere rechts mit etwas Rinnenraum dazwischen schweben lassen. Wie würde ich das mit Flexbox machen? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px …
121 html  css  flexbox 
11
Reagieren Sie auf nativen Text, der von meinem Bildschirm verschwindet, und weigern Sie sich, ihn zu umbrechen. Was ist zu tun?
Der folgende Code befindet sich in diesem Live-Beispiel Ich habe das folgende native Element reagieren: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} > Here …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.