Responsive Web Designing mit Flexbox | Erklärt

Ein reaktionsschnelles Webdesign wird als Design bezeichnet, das sein Layout je nach Umgebung verändert, in der es verwendet wird. Mit der Umgebung meinen wir das Verhalten der Website basierend auf der Bildschirmgröße, Breite, Auflösung, Orientierung usw. Es gibt viele Möglichkeiten, wie Sie Ihre Website reaktionsschnell machen können, z. B. Medienfragen, Raster, Flexbox usw. Der Fokus dieser Beschreibung liegt auf der Reaktion Ihres Webdesigns mit Flexbox.

Responsive Webdesign mit Flexbox

CSS Flexbox ist ein Layoutmodell, das eine effiziente und dynamische Anordnung von Elementen ermöglicht. Dieses Layout ist eindimensional und ermöglicht die Platzierung von Elementen in einem Behälter mit gleichem verteilten Raum.

Es reagiert Elemente, was bedeutet, dass die Elemente ihr Verhalten entsprechend der Art von Gerät ändern, die sie anzeigen. Darüber hinaus macht es Elemente flexibel und bietet ihnen eine angemessene Position und Symmetrie.

Eine Flexbox verfügt über zwei Komponenten, die Flex -Container und Flex -Element sind. Ein Flexbehälter beschreibt die Eigenschaften des Vorfahrenelements, während ein Flex -Element die Eigenschaften von Nachfolgerelementen definiert. Jede dieser Komponenten verwendet verschiedene Eigenschaften, um eine Flexbox zu implementieren.

Hier präsentieren wir Ihnen verschiedene reaktionsschnelle Layouts, die Sie mit Flexbox für verschiedene Geräte erstellen können.

So erstellen Sie mit Flexbox eine reaktionsschnelle Achtereiste mit Flexbox?

Hier zeigen wir, wie Sie mit dem einspaltigen Layout für Geräte wie Mobiltelefone, Tablets usw. eine reaktionsschnelle Achtereiste erstellen können, die eine kleine Bildschirmgröße haben, und ein zweispaliges Layout für Geräte wie Computer, Laptops usw. die größere Bildschirmgrößen haben.

Hier ist eine visuelle Darstellung eines einspaltigen Layouts für kleine Bildschirmgrößen.

Das folgende Diagramm zeigt das zweispaltige Layout für größere Bildschirmgrößen.

Lassen Sie uns nun zum Code übergehen.

Html

Heim
Service
Um

Im obigen Code haben wir eine Flexbox erstellt, indem wir drei Div -Behälter in einem größeren Div -Behälter nisten.

CSS

.Flex-Container
Anzeige: Flex;
Flex-Richtung: Säule;
Schriftgröße: 25px;
Text-Align: Mitte;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Verwenden der Klasse, die dem größeren DIV zugewiesen ist.

CSS

.nav1
Hintergrundfarbe: Darkgray;
Polsterung: 15px;
Flex: 50px;

.Nave: Hover
Hintergrundfarbe: Lightgray;

Hier stylen wir einfach unsere Navi -Spalten, indem wir ihnen mit der Flex -Eigenschaft einige Hintergrundfarbe, Polsterung und anfängliche Länge zur Verfügung stellen und ein gewisses Design auf dem Schweber des Navigationsverbaus definieren.

CSS

@media (min-Width: 768px)
.Flex-Container
Flex-Richtung: Reihe;

In der obigen Abfrage heißt es, dass sich die Richtung des Layout.

Ausgang

Wenn die Breite 767px oder weniger beträgt.

Wenn die Breite 768px oder breiter ist.

Eine reaktionsschnelle Naviein wurde erfolgreich erzeugt.

So erstellen Sie ein reaktionsschnelles Bildnetz mit Flexbox?

So können Sie eine reaktionsschnelle Galerie erstellen, die ihr Verhalten entsprechend dem Browserfenster ändert.

Html

Hier haben wir einen Div -Behälter erstellt und zwei weitere Div -Container darin verschachtelt. Beide verschachtelten Container nisten jeweils drei Bilder.

CSS

.Container
Anzeige: Flex;
Flex-Wrap: Wrap;
Polsterung: 5px;

Die DIV mit der "Container" -Klasse wird als Flexbox angezeigt und erhielt bestimmte Polsterung. Darüber hinaus wird der Flex-Wrap-Eigenschaft ein Wrap-Wert zugewiesen, was bedeutet, dass die Bilder bei Bedarf in den Container gewickelt werden.

CSS

.Spalten img
Breite: 100%;

.Säulen
Flex: 30%;
Max-Breite: 30%;
Polsterung: 5px;

Die Bilder wurden 100% Breite, so dass sie angemessen in den Container passen. Darüber hinaus erstellen wir mit dem Flex und der maximalen Breite zwei Spalten, die nebeneinander platziert werden.

CSS

@media (max-Width: 600px)
.Säulen
Flex: 50%;
Max-Breite: 50%;

Die Medienabfrage gibt an, dass, wenn die Breite geringer ist als die angegebene Zahl.

Ausgang

Wenn die Breite 600px oder breiter ist.

Wenn die Breite 600px oder weniger beträgt.

Eine reaktionsschnelle Bildergalerie wurde erstellt.

Abschluss

Ein reaktionsschnelles Webdesign kann mit verschiedenen Flexbox-Eigenschaften wie Flex-Richtung, Flex-Flow, Flex-Wrap usw. erstellt werden und bestimmte Medienabfragen angeben. Die Medienabfrage sollte den Typ und die Funktionen eines Geräts angeben, nach dem das Webdesign sein Erscheinungsbild auf verschiedenen Geräten verändert. Im obigen Artikel haben wir einige Layouts demonstriert, die Sie mit verschiedenen Flexbox -Eigenschaften zusammen mit Medienabfragen erstellen können.