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.

1
Warum schrumpfen Flex-Elemente nicht über die Inhaltsgröße hinaus?
Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei. Wenn ich jedoch einer Spalte Text hinzufüge und eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als es sein sollte. Ich habe versucht, es zu verwenden, word-break: break-wordund es hat geholfen, aber wenn ich die Größe der Spalte auf …
312 html  css  flexbox 
6
So rechtfertigen Sie ein einzelnes Flexbox-Element (überschreiben Sie den Rechtfertigungsinhalt)
Sie können align-itemsmit align-selffür ein flexibles Element überschreiben . Ich suche nach einer Möglichkeit, justify-contenteinen Flex-Artikel zu überschreiben . Wenn Sie einen Flexbox-Container mit hatten justify-content:flex-end, aber den ersten Artikel haben möchten justify-content: flex-start, wie könnte das gemacht werden? Dies wurde am besten durch diesen Beitrag beantwortet: https://stackoverflow.com/a/33856609/269396
283 css  flexbox 
9
Flexbox: 4 Elemente pro Zeile
Ich verwende eine Flexbox, um 8 Elemente anzuzeigen, deren Größe sich dynamisch mit meiner Seite ändert. Wie erzwinge ich, dass die Elemente in zwei Zeilen aufgeteilt werden? (4 pro Reihe)? Hier ist ein relevanter Ausschnitt: (Oder wenn Sie jsfiddle bevorzugen - http://jsfiddle.net/vivmaha/oq6prk1p/2/ ) .parent-wrapper { height: 100%; width: 100%; border: …
260 html  css  flexbox 
9
Wie werden Zeilenumbrüche in einem mehrzeiligen Flexbox-Layout angegeben?
Overа этот вопрос есть ответы на Stapelüberlauf на русском : Flexbox-Element - перенос на новую строку Gibt es eine Möglichkeit, einen Zeilenumbruch in einer Flexbox mit mehreren Zeilen zu machen? Zum Beispiel, um nach jedem dritten Element in diesem CodePen zu brechen . .container { background: tomato; display: flex; flex-flow: …
236 html  css  flexbox 
3
Was sind die Unterschiede zwischen Flex-Basis und Breite?
Es gab Fragen und Artikel dazu, aber soweit ich das beurteilen kann, nichts aussagekräftiges. Die beste Zusammenfassung, die ich finden konnte, ist Mit flex-base können Sie die Anfangs- / Startgröße des Elements angeben, bevor etwas anderes berechnet wird. Es kann entweder ein Prozentsatz oder ein absoluter Wert sein. ... was …
224 css  flexbox  width 
14
ReactNative: Wie zentriere ich Text?
Wie zentriere ich Text in ReactNative sowohl horizontal als auch vertikal? Ich habe eine Beispielanwendung in rnplay.org, in der adjustContent = "center" und alignItems = "center" nicht funktionieren: https://rnplay.org/apps/AoxNKQ Der Text sollte zentriert sein. Und warum befindet sich oben ein Rand zwischen dem Text (gelb) und dem übergeordneten Container? Code: …
3
CSS richtet ein Element rechts mit der Flexbox aus
https://jsfiddle.net/vhem8scs/ Ist es möglich, zwei Elemente links und ein Element rechts an der Flexbox auszurichten? Der Link zeigt es deutlicher. Das letzte Beispiel ist das, was ich erreichen möchte. In der Flexbox habe ich einen Codeblock. Mit float habe ich vier Codeblöcke. Das ist ein Grund, warum ich Flexbox bevorzuge. …
212 css  alignment  flexbox 
10
100% Breite in React Native Flexbox
Ich habe bereits mehrere Flexbox-Tutorials gelesen, kann diese einfache Aufgabe jedoch immer noch nicht ausführen. Wie kann ich die rote Box auf 100% Breite bringen? Code: <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Natives </Text> <Text style={styles.line1}> line1 </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev …
7
Warum kann <fieldset> kein Flex-Container sein?
Ich habe versucht, ein fieldsetElement mit display: flexund zu stylen display: inline-flex. Es hat jedoch nicht funktioniert: flexbenahm sich wie blockund inline-flexbenahm sich wie inline-block. Dies geschieht sowohl unter Firefox als auch unter Chrome, funktioniert aber seltsamerweise unter IE. Ist es ein Fehler? Ich konnte nicht feststellen, dass fieldsetdies ein …
200 html  css  flexbox 
4
Füllen Sie den verbleibenden vertikalen Raum mit CSS über display: flex
In einem 3-reihigen Layout: Die obere Reihe sollte entsprechend ihrem Inhalt dimensioniert sein Die untere Reihe sollte eine feste Höhe in Pixel haben Die mittlere Reihe sollte erweitert werden, um den Behälter zu füllen Das Problem ist, dass beim Erweitern des Hauptinhalts die Kopf- und Fußzeilen zerkleinert werden: HTML: &lt;section&gt; …
194 css  layout  flexbox 
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.