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.

30
Besserer Weg, um den Abstand zwischen Flexbox-Elementen einzustellen
So stellen Sie den minimalen Abstand zwischen Flexbox-Elementen ein, die ich margin: 0 5pxam .itemund margin: 0 -5pxam Container verwende. Für mich scheint es ein Hack zu sein, aber ich kann keinen besseren Weg finden, dies zu tun. Beispiel #box { display: flex; width: 100px; margin: 0 -5px; } .item …
779 css  flexbox 
12
Wie kann ich das Flex-Element nach rechts ausrichten?
Gibt es eine flexiblere Möglichkeit, "Kontakt" nach rechts auszurichten, als sie zu verwenden position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div …
680 html  css  flexbox 
5
Warum gibt es in CSS Flexbox keine Eigenschaften für "Elemente rechtfertigen" und "Selbst rechtfertigen"?
Betrachten Sie die Hauptachse und die Querachse eines Flexcontainers: Quelle: W3C Zum Ausrichten von Flex-Elementen entlang der Hauptachse gibt es eine Eigenschaft: justify-content Zum Ausrichten von Flex-Elementen entlang der Querachse gibt es drei Eigenschaften: align-content align-items align-self Im obigen Bild ist die Hauptachse horizontal und die Querachse vertikal. Dies sind …
12
Flexbox: horizontal und vertikal zentrieren
So zentrieren Sie div mithilfe der Flexbox horizontal und vertikal innerhalb des Containers. Im folgenden Beispiel möchte ich jede Zahl untereinander (in Zeilen), die horizontal zentriert sind. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: …
669 html  css  flexbox 
10
Wie kann ich Flexbox-Kinder zu 100% ihrer Eltern machen?
Ich versuche, den vertikalen Raum eines Flex-Elements in einer Flexbox zu füllen. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> …
459 css  flexbox 
8
Wie kann ich Text in einer Flexbox vertikal ausrichten?
Ich möchte Flexbox verwenden, um einige Inhalte in einem vertikal auszurichten, <li>aber keinen großen Erfolg zu haben. Ich habe online nachgesehen und viele der Tutorials verwenden tatsächlich ein Wrapper-Div, das align-items:centerdie Flex-Einstellungen des übergeordneten Elements abruft. Ich frage mich jedoch, ob es möglich ist, dieses zusätzliche Element auszuschneiden. Ich habe …
424 html  css  flexbox 
18
Wie richte ich 3 Divs (links / Mitte / rechts) in einem anderen Div aus?
Ich möchte 3 Divs in einem Container-Div ausrichten lassen, ungefähr so: [[LEFT] [CENTER] [RIGHT]] Das Container-Div ist 100% breit (keine festgelegte Breite), und das mittlere Div sollte nach der Größenänderung des Containers in der Mitte bleiben. Also habe ich gesetzt: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} Aber es wird: [[LEFT] [CENTER] …
27
Flex-Box: Richten Sie die letzte Zeile am Raster aus
Ich habe ein einfaches Flex-Box-Layout mit einem Container wie: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Jetzt möchte ich, dass die Elemente in der letzten Zeile mit den anderen ausgerichtet werden. justify-content: space-between;sollte verwendet werden, da die Breite und Höhe des Gitters angepasst werden kann. Derzeit sieht …
378 css  flexbox  grid-layout 
8
Richten Sie ein Element mit der Flexbox nach unten aus
Ich habe eine divmit 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 text | |can have many | |rows | | | | | | | …
375 html  css  flexbox 
2
Flexbox, die Elementen nicht die gleiche Breite verleiht
Versuchen Sie es mit einem Flexbox-Navi, das bis zu 5 Elemente und nur 3 Elemente enthält, aber die Breite nicht gleichmäßig auf alle Elemente verteilt. Geige Das Tutorial, nach dem ich dies modelliere, ist http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ SASS * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: …
368 html  css  flexbox 
21
Bootstrap 4 richtet die Navigationsleistenelemente rechts aus
Wie richte ich ein Navigationsleistenelement nach rechts aus? Ich möchte das Login haben und mich rechts registrieren. Aber alles, was ich versuche, scheint nicht zu funktionieren. Folgendes habe ich bisher versucht: <div>um die <ul>mit dem atribute:style="float: right" <div>um die <ul>mit dem atribute:style="text-align: right" versuchte diese beiden Dinge auf den <li>Tags …
7
Was ist der Unterschied zwischen Display: Inline-Flex und Display: Flex?
Ich versuche, Elemente innerhalb eines ID-Wrappers vertikal auszurichten. Ich habe display:inline-flex;dieser ID die Eigenschaft gegeben , da der ID-Wrapper der Flex-Container ist. Es gibt jedoch keinen Unterschied in der Darstellung. Ich habe erwartet, dass alles in der Wrapper-ID angezeigt wird inline. Warum ist es nicht? #wrapper { display: inline-flex; /*no …
330 css  flexbox 
15
Vertikales Ausrichtungszentrum in Bootstrap 4
Ich versuche, meinen Container mit Bootstrap 4 in der Mitte der Seite zu zentrieren. Bisher war ich nicht erfolgreich. Jede Hilfe wäre dankbar. Ich habe es bei Codepen.io erstellt, damit ihr damit spielen und mich wissen lassen könnt, was funktioniert, wenn ich Ideen habe ... Code-Snippet anzeigen var currentAuthor = …
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.