Responsive Web Designing Utilizzo di Flexbox | Spiegato

Un web design reattivo viene definito un design che cambia il suo layout a seconda dell'ambiente in cui viene utilizzato. Per ambiente, intendiamo che il comportamento del sito Web cambierà in base alle dimensioni dello schermo del dispositivo, alla larghezza, alla risoluzione, all'orientamento, ecc. Esistono molti modi con cui puoi rendere il tuo sito Web reattivo come query multimediali, griglia, flexbox, ecc. Il focus di questo articolo sarà su come rendere reattivo il tuo web design utilizzando Flexbox.

Web design reattivo utilizzando Flexbox

CSS Flexbox è un modello di layout che consente una disposizione efficiente e dinamica di elementi. Questo layout è unidimensionale e consente il posizionamento di elementi all'interno di un contenitore con spazio ugualmente distribuito.

Rende gli elementi reattivi, il che significa che gli elementi cambiano il loro comportamento in base al tipo di dispositivo che li mostra. Inoltre, rende gli elementi flessibili e fornisce loro una posizione adeguata e la simmetria.

Un FlexBox ha due componenti, che sono contenitori flessibili e articolo flessibile. Un contenitore flessibile descrive le proprietà dell'elemento antenato, mentre un elemento flessibile definisce le proprietà degli elementi successivi. Ognuno di questi componenti utilizza varie proprietà per implementare una Flexbox.

Qui ti presenteremo vari layout reattivi che puoi creare per diversi dispositivi utilizzando Flexbox.

Come creare una navigatura reattiva utilizzando Flexbox?

Qui dimostreremo come è possibile creare una navigazione reattiva utilizzando il layout a una colonna per dispositivi come telefoni cellulari, tablet, ecc. che hanno dimensioni dello schermo più grandi.

Ecco una rappresentazione visiva di un layout a una colonna per piccole dimensioni dello schermo.

Il diagramma seguente mostra il layout a due colonne per dimensioni dello schermo più grandi.

Ora passiamo al codice.

Html

Casa
Servizio
Di

Nel codice sopra, abbiamo realizzato un Flexbox nidificando tre contenitori Div all'interno di un contenitore di div più grande.

CSS

.Flex-Container
display: flex;
Direzione flessibile: colonna;
Font-size: 25px;
Testo-align: centro;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

Usando la classe assegnata al Div più grande, stiamo impostando il display su Flex, quindi dandogli una direzione utilizzando il valore della colonna della proprietà di direzione del flusso e quindi styling Il nostro div con CSS di base.

CSS

.NAV1
Background-color: Darkgray;
imbottitura: 15px;
Flex: 50px;

.nav: hover
Background-color: LightGray;

Qui stiamo semplicemente styling delle nostre colonne Navbar fornendo loro un po 'di colore di sfondo, imbottitura e lunghezza iniziale usando la proprietà Flex e definendo un po' di stile sull'obbligo del collegamento di navigazione.

CSS

@Media (Min-Width: 768px)
.Flex-Container
Direzione flessibile: riga;

La query sopra afferma che quando la larghezza di un particolare dispositivo è 768px o più larga, la direzione del layout cambierà da un layout di una colonna a due colonne.

Produzione

Quando la larghezza è 767px o meno.

Quando la larghezza è 768px o più ampia.

È stata generata con successo una barbra di navigazione reattiva.

Come creare una griglia di immagine reattiva utilizzando Flexbox?

Ecco come è possibile creare una galleria reattiva che cambia il suo comportamento secondo la finestra del browser.

Html

Qui abbiamo creato un contenitore div e nidificato altri due contenitori di div. Entrambi i contenitori nidificati nidificano ulteriormente tre immagini ciascuno.

CSS

.Container
display: flex;
Flex-wrap: avvolgimento;
imbottitura: 5px;

Il Div con la classe "Container" viene visualizzato come Flexbox ed è stato dato una certa imbottitura. Inoltre, alla proprietà Flex-Wrap viene assegnato un valore avvolgente, il che significa se necessario, le immagini verranno avvolte all'interno del contenitore.

CSS

.colonne img
larghezza: 100%;

.colonne
Flex: 30%;
Licromra massima: 30%;
imbottitura: 5px;

Le immagini sono state assegnate alla larghezza del 100% in modo da adattarsi in modo appropriato nel contenitore, inoltre usando la flessione e la larghezza massima, stiamo creando due colonne che verranno posizionate l'una accanto all'altra.

CSS

@media (max-width: 600px)
.colonne
Flex: 50%;
Licromra massima: 50%;

La query multimediale specifica che se la larghezza è inferiore al numero specificato, la due colonne verrà convertita in uno.

Produzione

Quando la larghezza è 600px o più ampia.

Quando la larghezza è 600px o meno.

È stata creata una galleria di immagini reattiva.

Conclusione

Un web design reattivo può essere creato utilizzando varie proprietà Flexbox come la direzione flessibile, il flusso flessibile, il wrap flex, ecc. E specificare alcune query multimediali. La query multimediale dovrebbe specificare il tipo e le caratteristiche di un dispositivo in base al quale il web design modificherà il suo aspetto su vari dispositivi. Nell'articolo sopra, abbiamo dimostrato alcuni layout che è possibile creare utilizzando varie proprietà Flexbox insieme alle query multimediali.