Responsiv webdesign ved hjelp av Flexbox | Forklart

En responsiv webdesign blir referert til som en design som endrer utformingen avhengig av miljøet det brukes i. Med miljø mener vi atferden til nettstedet vil endres basert på enhetsskjermstørrelse, bredde, oppløsning, orientering osv. Det er mange måter du kan gjøre nettstedet ditt responsivt, for eksempel medieforespørsler, rutenett, flexbox osv. Fokuset for denne oppskrivningen vil være på hvordan du gjør webdesign responsiv med Flexbox.

Responsiv webdesign ved hjelp av flexbox

CSS Flexbox er en layoutmodell som tillater et effektivt og dynamisk arrangement av elementer. Denne utformingen er endimensjonal og tillater plassering av elementer inne i en beholder med like distribuert plass.

Det gjør elementene responsive, noe som betyr at elementene endrer atferden i henhold til typen enhet som viser dem. Dessuten gjør det elementer fleksible og gir dem passende posisjon og symmetri.

En flexbox har to komponenter, som er flex container og flex -element. En flex -beholder beskriver egenskapene til stamfarens element, mens et flex -element definerer egenskapene til etterfølgerelementer. Hver av disse komponentene benytter seg av forskjellige egenskaper for å implementere en flexbox.

Her vil vi presentere deg for forskjellige responsive oppsett som du kan lage for forskjellige enheter ved hjelp av Flexbox.

Hvordan lage en responsiv navbar ved hjelp av Flexbox?

Her skal vi demonstrere hvordan du kan lage en responsiv navbar ved å bruke en-kolonneoppsettet for enheter som mobiltelefoner, nettbrett osv. Som har en liten skjermstørrelse og en to-kolonneoppsett for enheter som datamaskiner, bærbare datamaskiner osv som har større skjermstørrelser.

Her er en visuell representasjon av en en-kolonneoppsett for små skjermstørrelser.

Diagrammet nedenfor viser to-kolonneoppsettet for større skjermstørrelser.

La oss nå gå videre til koden.

Html

Hjem
Service
Om

I koden ovenfor har vi laget en flexbox ved å hekke tre DIV -containere inne i en større div -beholder.

CSS

.flex-container
Display: Flex;
Flex-regi: kolonne;
Font-størrelse: 25px;
tekst-align: sentrum;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Ved å bruke klassen som er tilordnet den større div, setter vi skjermen for å bøye og deretter gi den en retning ved å bruke kolonneverdien til flyt-retningen.

CSS

.nav1
Bakgrunnsfarge: Darkgray;
polstring: 15px;
Flex: 50px;

.Nav: Hopp
Bakgrunnsfarge: Lightgray;

Her styler vi ganske enkelt Navbar -kolonnene våre ved å gi dem litt bakgrunnsfarge, polstring og innledende lengde ved å bruke Flex -egenskapen og definere litt styling på hoveren av navigasjonskoblingen.

CSS

@media (Min-bredde: 768px)
.flex-container
Flex-regi: rad;

Spørringen over sier at når bredden på en bestemt enhet er 768px eller bredere, vil retningen på oppsettet endre seg fra en kolonne til to-kolonneoppsett.

Produksjon

Når bredden er 767px eller mindre.

Når bredden er 768px eller bredere.

En responsiv navbar ble generert med hell.

Hvordan lage et responsivt bildnett ved hjelp av Flexbox?

Slik kan du lage et responsivt galleri som endrer atferden i henhold til nettleservinduet.

Html

Her har vi laget en div container og nestet to div containere inni den. Begge de nestede beholderne hekker videre tre bilder hver.

CSS

.container
Display: Flex;
Flex-Wrap: Wrap;
polstring: 5px;

Div med "container" -klassen vises som en flexbox, og har fått visse polstring. Dessuten er flex-wrap-egenskapen tildelt innpakningsverdi, noe som om nødvendig at bildene blir pakket inn i beholderen.

CSS

.Kolonner IMG
Bredde: 100%;

.kolonner
Flex: 30%;
Maks bredde: 30%;
polstring: 5px;

Bildene har fått 100% bredde slik at de passer på riktig.

CSS

@media (maks bredde: 600px)
.kolonner
Flex: 50%;
Maks bredde: 50%;

Media-spørringen spesifiserer at hvis bredden er mindre enn det angitte tallet, vil to-kolonnen bli konvertert til en.

Produksjon

Når bredden er 600px, eller bredere.

Når bredden er 600px, eller mindre.

Et responsivt bildegalleri ble opprettet.

Konklusjon

En responsiv webdesign kan opprettes ved hjelp av forskjellige Flexbox-egenskaper som flex-retning, Flex-Flow, Flex-Pwrap, osv. Sammen med å spesifisere visse medieforespørsler. Media -spørringen skal spesifisere typen og funksjonene til en enhet som webdesignet vil endre utseendet på forskjellige enheter. I artikkelen over har vi demonstrert noen få oppsett som du kan opprette ved hjelp av forskjellige Flexbox -egenskaper sammen med medier.