Rechtfertigungsinhalt vs. Ausrichtungsgegenstände in Flexbox

Ich habe die Erklärung geschrieben display: flex Mehr mal als ich zählen kann, und ich vergesse immer noch gelegentlich, ob es so ist justify-content oder align-items Das steuert die vertikale Achse hintereinander. Das ist keine Unwissenheit; Es ist die ehrliche Realität eines Layoutmodells, dessen Verhalten sich je nach Situation ändert flex-direction. Wenn die Richtung ist row, justify-content Horizontal funktioniert Umschalten auf column Und die gleiche Eigenschaft funktioniert jetzt vertikal Wer behauptet, er öffnet nie die Browser-Dev-Tools, um diese Werte anzustupsen, bis die Boxen dort landen, wo er will, liegt entweder oder hat einen viel besseren Speicher als meiner.

der Flexbox-generator Ist das Tool, das ich mir gewünscht hätte, als ich dieses Modell lernte, und das, nach dem ich immer noch greife, wenn ich ein Layout prototypisieren möchte, ohne ein Stylesheet zu berühren Man stellt die Containereigenschaften ein, eine Reihe von Beispielboxen fliegt in Echtzeit wieder auf, und das genaue CSS, das das erzeugt, was man sieht, sitzt in einem kopierfertigen Kästchen darunter Es dreht sich & quot; merken, welche Eigenschaft was macht" in & quot; klicken, bis es richtig aussieht, und dann die Antwort auslesen."

tl; dr: Flexbox ist ein eindimensionales Layoutmodell Der Container treibt es durch sechs Eigenschaften: flex-direction, flex-wrap, justify-content, align-items, align-content, und gap. Dieser Generator legt sie alle offen, zeigt eine Live-Vorschau an und sendet sauberes CSS aus. Da die Vorschau mit denselben Deklarationen rendert, die sie ausgibt, sehen Sie genau das, was Sie einfügen. Es läuft vollständig in Ihrem Browser ohne Anmeldung.

Welches Problem löst ein Flexbox-Generator?

Flexbox ist gerade deshalb leistungsstark, weil es relativ ist Sie beschreiben Absicht (" verteilen diese Elemente mit gleichem Raum zwischen ihnen, " " zentrieren Sie dies auf beiden Achsen") und der Browser berechnet die Pixel. Aber relative Systeme sind schwer in Ihrem Kopf zu halten, da die Wirkung jeder Eigenschaft vom Zustand der anderen abhängt. align-content Tut nichts, bis sich die Artikel umwickeln Hauptachse und Querachse vertauschen sich, wenn Sie die Richtung ändern. space-between und space-around Ähnlich aussehen, bis man sie nebeneinander vergleicht.

Der schnellste Weg, Intuition für ein relatives System aufzubauen, besteht darin, es zu manipulieren und zu beobachten. Ein Generator kollabiert die Edit-Save-Refresh-Schleife in einer einzigen Interaktion: Ändern Sie einen Dropdown, sehen Sie, wie sich die Kästchen bewegen. Nach zehn Minuten mit einer Live-Vorschau hört die Eigenschaft, die die Querachse steuert, auf, eine Tatsache zu sein, die Sie sich merken, und wird zu etwas, das Sie spüren. Und wenn Sie mit dem Erkunden fertig sind, bleibt Ihnen keine mentale Note zum Transkribieren übrig; Das funktionierende CSS ist bereits für Sie geschrieben.

Welche Eigenschaften steuert der Container?

Flexbox teilt die Verantwortung zwischen dem Container und seinen Gegenständen auf Der Container entscheidet über die Gesamtanordnung, und dort konzentriert sich der Generator, weil dort die meisten Layoutentscheidungen leben Hier ist, was jede Containereigenschaft tut.

Eigentum	Was es kontrolliert	Gemeinsame Werte
flex-direction	Die Hauptachse und ihre Richtung	row, column, row-reverse, column-reverse
flex-wrap	Ob Artikel auf neue Leitungen überlaufen	nowrap, wrap, wrap-reverse
justify-content	Abstand entlang der Hauptachse	flex-start, center, space-between, space-evenly
align-items	Positionierung auf der Querachse	stretch, center, flex-start, baseline
align-content	Abstand der umwickelten Linien auf der Querachse	stretch, center, space-between
gap	Zwischenraum zwischen den Gegenständen	beliebige Länge, zum Beispiel 16px

Das mentale Modell, das diesen Stick herstellt, ist die zweiachsige Idee aus der Spezifikation, entlang der Hauptachse fließen Items, die flex-direction Mengen Die Querachse steht immer senkrecht dazu. justify-content Raum auf der Hauptachse verteilt; align-items Positionen auf der Querachse Einmal flex-direction ist column„Die Hauptachse ist also vertikal justify-content Stapelt nun Gegenstände von oben nach unten und align-items Stellt sie von links nach rechts an An den Eigenschaften änderte sich nichts; die Achsen drehten sich darunter.

Wie zentriere ich eine Div mit Flexbox?

Dies ist die am häufigsten gesuchte Flexbox-Frage, und die Antwort ist drei Zeilen Stellen Sie den Container auf display: flexDann justify-content: center und align-items: center. Dadurch wird das Kind auf einmal auf die Hauptachse und die Querachse zentriert, was für eine Standardreihe horizontal und vertikal den Totpunkt bedeutet.

Im Generator wählen Sie center Sowohl für Ausrichtungssteuerungen als auch die Sampleboxen springen in die Mitte des Vorschaubereichs, Die Ausgabebox zeigt dann:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

Der Grund dafür, dass es sich lohnt, dieses Rezept durch Klicken und nicht durch Auswendiglernen zu erstellen, liegt darin, dass Sie in dem Moment, in dem sich Ihre Anforderung auch nur geringfügig ändert, zum Beispiel möchten, dass das Element oben festgesteckt, aber horizontal zentriert ist, einen Dropdown ändern und das Ergebnis sehen, anstatt zu erraten, welches davon die beiden zu bearbeitenden Eigenschaften.

Wann spielt Align-Content eine Rolle?

align-content Ist die Eigenschaft, die die Leute setzen und sich dann fragen, warum nichts passiert Die Antwort steht in der Spezifikation: Sie betrifft nur das Layout, wenn es mehrere Linien von Flex-Elementen gibt Mit flex-wrap: nowrapIn § „sitzt jedes Element auf einer einzigen Linie, es gibt also keine Reihe von Linien, die verteilt werden müssen, und die Eigenschaft ist inert.

Der Generator kodiert diese Regel, damit Sie nicht von ihr in die Irre geführt werden können Wenn der Wickel ausgeschaltet ist, wird die align-content Die Steuerung ist deaktiviert und die Eigenschaft wird im generierten CSS ganz weggelassen Schalten Sie das Wrapping ein und es wird aktiv, und Sie können zusehen, wie es die Reihen der verpackten Gegenstände zusammenschiebt oder auf der Querachse auseinanderstrebt Das Auslassen der Eigenschaft nur, wenn es etwas tut, hält die Ausgabe ehrlich: Jede Deklaration in der kopierten Regel ist eine, die einen sichtbaren Effekt auf Ihr Layout hat.

Was ist der Unterschied zwischen den Werten des Rechtfertigungsinhalts?

der justify-content Mit Schlüsselwörtern verdient eine Live-Vorschau ihren Lebensunterhalt, da die Unterschiede räumlich und in Prosa schwer zu beschreiben sind. flex-start Packt Gegenstände am Anfang der Hauptachse. center Packt sie in die Mitte. space-between Schiebt das erste und das letzte Element an die Kanten und verteilt den verbleibenden Raum gleichmäßig auf die anderen, sodass an den Außenkanten kein Platz vorhanden ist. space-around Gibt jedem Element den gleichen Platz auf beiden Seiten, was bedeutet, dass der Spalt zwischen zwei Elementen doppelt so groß ist wie der Spalt an den Rändern. space-evenly Macht jede Lücke gleich, auch die Kanten.

Wenn Sie diesen Absatz lesen, lernen Sie fast nichts. Wenn Sie die fünf Werte mit fünf Kästchen auf dem Bildschirm durchklicken, erfahren Sie in Sekundenschnelle, und Sie werden nie verwirren space-between trotz space-around Wieder einmal haben Sie das Kantenverhalten nebeneinander gesehen. Das ist das Argument dafür, dass das Layout durch Manipulation und nicht durch Auswendiglernen erstellt wird, und es ist das gleiche Argument dafür, eine Reihe visueller CSS-Tools geschlossen zu halten: die Gradientengenerator und das Kastenschattengenerator Aus dem gleichen Grund existieren, denn auch Gradienten und Schatten sind einfacher per Auge einzuwählen als blind zu schreiben Der breitere Fall für den Zusammenbau dieser Art von Toolkit befindet sich in diesem Stück auf dem Webentwickler-Toolkitdrohen

Flexbox oder CSS Grid?

Diese Frage taucht ständig auf, und das Framing, dass es sich um einen Wettbewerb handelt, ist der Fehler Flexbox ist eindimensional: Es legt Gegenstände entlang einer einzigen Achse, wickelt, wenn es gesagt wird, und es zeichnet sich durch Reihen von Dingen aus, deren Größe der Browser aushandeln soll Symbolleisten, Navigationsleisten, Tastengruppen und Kartenzeilen sind natürliche Flexbox-Jobs. CSS Grid ist zweidimensional: Es steuert Zeilen und Spalten zusammen, und es zeichnet sich durch eine Struktur auf Seitenebene aus, in der Sie explizite Spuren wünschen.

In realen Projekten nisten sie sich ständig ein Ein Gitter definiert die Seitenbereiche, und ein Flexcontainer ordnet die Gegenstände innerhalb einer dieser Regionen an Durch gründliches Erlernen der Flexbox wird das Gitter nicht redundant und umgekehrt; es macht Sie fließend in dem Werkzeug, das zu jedem Auftrag passt Ein Generator ist eine schnelle Möglichkeit, diese Sprachkompetenz für den eindimensionalen Fall zu erreichen, und sobald die Containereigenschaften in zweiter Natur sind, hört das Lesen und Schreiben von Flexlayouts von Hand auf, eine Referenz zu benötigen.

Wie verwende ich den Flexbox Generator?

Der Fluss spiegelt wider, wie Sie über ein Layout denken.

1. Wählen Sie flex-direction Und ob Items wickeln sollen Damit werden die Achsen und das Überlaufverhalten festgelegt, von den beiden Entscheidungen hängt alles andere ab.
2. Ausrichtung einstellen. Anpassen justify-content Auf der Hauptachse und align-items Auf der Querachse, bis die Vorschau mit der Anordnung im Kopf übereinstimmt.
3. Abstands einstellen Stellen Sie die gap Zwischen den Artikeln mit dem Schieberegler und wenn die Verpackung eingeschaltet ist, stellen Sie ein align-content Zeilen zu räumen.
4. Kopieren Sie das CSS. Die generierte Regel zielt auf a ab .container Klasse und aktualisiert live Kopieren Sie es mit einem Klick und fügen Sie es in Ihr Stylesheet ein.

Sie können auch Vorschauelemente hinzufügen oder entfernen, um zu testen, wie sich ein Layout unter verschiedenen Inhalten verhält A space-between Die Navigationsleiste sieht mit drei Elementen gut aus und mit sieben, die umwickelt werden, sehr unterschiedlich. Wenn Sie die Anzahl ändern können, während Sie sie beobachten, können Sie sie erkennen, bevor sie in Produktion geht.

Ersetzt die Lücke die Abstandsmargen?

Meistens ja, und es ist eine echte Verbesserung Vor gap In Flex-Behältern gestützt wurde, bedeuteten Abstandsgegenstände, jedem Kind Margen hinzuzufügen und dann den zusätzlichen Rand beim ersten oder letzten zu bekämpfen, normalerweise mit einem :last-child Überschreiben oder eine negative Marge auf dem übergeordneten Element. gap Legt den Abstand zwischen den Elementen direkt fest, gilt auch zwischen umwickelten Linien und fügt an den Außenkanten nichts hinzu, sodass die gesamte Klasse der Kantenrandwanzen verschwindet.

Der Generator behandelt gap Als erstklassiges Steuerelement mit Pixel-Slider, und es lässt die Deklaration weg, wenn die Lücke Null ist, so dass die Ausgabe minimal bleibt Für Produktionsarbeiten, gap on flex containers wird über die aktuellen Browser gut unterstützt, so dass es selten einen Grund gibt, zurück zum Margin-Ansatz zu greifen Wenn Sie während der Arbeit einen Abstandswert zwischen Einheiten umwandeln, wird die CSS-Einheitenwandler Handles die px auf rem Rechnen ohne Taschenrechner.

Wo liegen die Grenzen des generierten CSS?

Der Generator erzeugt die Containerregel Es stellt keine Eigenschaften pro Artikel ein wie flex-grow, flex-shrink, oder flex-basisDie steuern, wie einzelne Artikel expandieren und sich zusammenziehen, um Platz zu füllen. Dabei handelt es sich um Entscheidungen auf Artikelebene, die von Ihrem spezifischen Inhalt abhängen, und für die meisten Layouts sind die Containereigenschaften plus flex: 1 Auf den Gegenständen, die wachsen sollen, ist alles, was Sie brauchen Wenn Sie eine feine Kontrolle pro Artikel benötigen, ist die generierte Containerregel immer noch die richtige Grundlage, auf der Sie aufbauen können.

Die Ausgabe verwendet standardmäßige, vorbestimmte Eigenschaften. Anbieterpräfixe für Flexbox wurden für Browser benötigt, die jahrelang keine Unterstützung mehr haben, daher sollte ein modernes Stylesheet sie nicht tragen, und das Hinzufügen ist heute Rauschen. Das generierte CSS ist wie geschrieben produktionsbereit, was der Punkt ist: Sie verlassen es mit einer Regel, die Sie einfügen können, und nicht mit einer Startskizze, die Sie fertigstellen müssen. Für den breiteren Satz kleiner Dienstprogramme, die das Arbeiten im Frontend beschleunigen, ist dieser Überblick über Entwicklerproduktivitätstools Ein guter Begleiter ist, ebenso wie die Gradientengeneratorführung Wenn visuelles CSS der Teil ist, den Sie beschleunigen möchten.

Welche gängigen Layouts kann ich damit bauen?

Eine Handvoll Rezepte decken die meisten täglichen Flexbox-Arbeiten ab, und jedes ist ein paar Klicks im Generator Eine Navigationsleiste mit einem Logo auf der linken Seite und Links auf der rechten Seite ist justify-content: space-between trotz align-items: center Auf einer Reihe. Ein perfekt zentrierter Held, der klassische & quot; zentrieren Sie ein Kästchen auf der Seite, " ist justify-content: center und align-items: center. Ein vertikaler Stapel von Formularfeldern ist flex-direction: column Mit einem gap Für gleichmäßige Abstände, die sauberer sind als Ränder auf jedem Feld Eine responsive Kartenreihe, die auf schmalen Bildschirmen neue Linien umwickelt, ist eine Reihe mit flex-wrap: wrap und a gapDann flex: 1 Auf den Karten selbst, so dass sie wachsen, um die Reihe zu füllen.

Der Wert, diese im Generator aufzubauen, anstatt sie aus dem Speicher zu kopieren, ist, dass man die Randfälle sofort sieht A space-between Navbar mit nur einem Element pins dieses Element zu Beginn, was wie ein Fehler aussehen kann, bis Sie das verstehen space-between Hat nichts mit einem einzigen Gegenstand zu verteilen Eine Wickelkartenreihe verhält sich bei zwei Karten anders als bei sechs, und mit der Vorschau' s einstellbare Artikelanzahl können Sie beides vor dem Versand überprüfen Aufbau des Layouts durch Manipulation bedeutet, dass die überraschenden Fälle auftauchen, während Sie noch im Werkzeug sind, nicht nachdem ein Benutzer sie gemeldet hat.

Ist ein Rezept in den Fingern, braucht man dafür nicht mehr den Generator und schreibt die fünf Zeilen direkt, das ist der gesunde Endzustand, das Tool ist ein Lehrer genauso wie ein Produzent: Jedes Layout, das man durch Klicken baut, versteht man beim nächsten Handschreiben etwas besser, genau so sollte sich ein gutes visuelles Dienstprogramm für die Grundlagen allmählich überflüssig machen und gleichzeitig für die fummeligen Fälle handlich bleiben.

FAQ

Was ist ein CSS Flexbox Generator?

Ein CSS-Flexbox-Generator ist ein visuelles Tool, mit dem Sie Flex-Container-Eigenschaften festlegen und das resultierende CSS kopieren können. Sie passen Rechtfertigungsinhalte, Ausrichtungselemente, Richtung, Umschlingung und Lücke an, sehen eine Live-Vorschau und fügen die generierte Regel in Ihr Stylesheet ein.

Wie zentriere ich eine Div mit Flexbox?

Stellen Sie den Container auf Anzeige ein: flex, dann rechtfertigen-inhalt: zentrieren und ausrichten-elemente: zentrieren Das zentriert die Elemente sowohl auf der Haupt - als auch auf der Querachse Wählen Sie in diesem Tool zentrieren für beide Ausrichtungssteuerungen und kopieren Sie das CSS.

Was ist der Unterschied zwischen Rechtfertigungsinhalt und Align-Items?

Rechtfertigungsinhalt verteilt Gegenstände entlang der Hauptachse, die für eine Reihe horizontal und für eine Spalte vertikal ist Ausrichtungsgegenstände positionieren Gegenstände auf der Querachse, senkrecht zur Hauptachse Ändern von Flex-Direction-Swaps, welche Achse jeder steuert.

Wann wirkt sich Align-Content aus?

Align-Content wirkt sich nur auf das Layout aus, wenn Elemente auf mehr als eine Zeile gewickelt werden, da es diese Linien auf der Querachse voneinander trennt. Wenn Flex-Wrap jetzt eingestellt ist, gibt es eine einzige Zeile, sodass die Eigenschaft nichts bewirkt und dieses Tool sie aus der Ausgabe weglässt.

Was bewirkt die Lückeneigenschaft in Flexbox?

Gap setzt einen konsistenten Raum zwischen Flex-Elementen, ohne jedem Element Margen hinzuzufügen Es gilt zwischen Elementen auf derselben Linie und zwischen umwickelten Linien und vermeidet die Kanten-Rand-Probleme, die durch margenbasierte Abstände entstehen.

Was ist der Unterschied zwischen Flex und Inline-Flex?

Anzeige: flex macht den Behälter zu einer Box auf Blockebene, die die volle verfügbare Breite einnimmt Anzeige: Inline-flex macht es zu einer Box auf Inline-Ebene, die im Textfluss sitzt und nur so breit ist wie sein Inhalt, während beide ihre Kinder mit den gleichen Flexregeln auslegen.

Ersetzt flexbox CSS Grid?

No. Flexbox ist ein eindimensionales Modell zum Verlegen von Gegenständen entlang einer einzigen Achse, ideal für Werkzeugleisten, Navigation und Kartenreihen. CSS Grid ist zweidimensional für Zeilen und Spalten zusammen. Sie sind komplementär und werden oft im gleichen Layout verwendet.

Ist das generierte CSS sicher in der Produktion zu verwenden?

Ja. Flexbox wird in jedem modernen Browser unterstützt und das Tool gibt standardmäßige, nicht fixierte CSS-Eigenschaften ab, jegliche Verarbeitung geschieht in Ihrem Browser, es wird also nichts hochgeladen und das Tool funktioniert offline, sobald es geladen ist.