Ordine Flex CSS

Un Flexbox o un elemento viene utilizzato per contenere contenuti HTML. Una proprietà CSS Flex viene utilizzata per applicare gli effetti delle lunghezze flessibili su oggetti flessibili. Un foglio di stile a cascata offre la proprietà dell'ordine utilizzato per organizzare gli articoli Flex. Per applicare la proprietà dell'ordine, gli elementi all'interno della Flexbox dovrebbero essere flessibili. Altrimenti, la proprietà non sarà interessata.

Creazione e ordinamento flessibili

In questo esempio, abbiamo usato un semplice Div per aggiungere ulteriori div al suo interno, creando un fenomeno di div Nesting. Il div esterno è noto come Flexbox per diversi contenuti al suo interno. Il loro div esterno è il div principale che porta diversi div al suo interno. È dichiarato con una classe CSS per applicare alcuni effetti CSS su di essa. Questa classe è descritta nella sezione testa con il tag di stile formando un CSS interno.

All'interno del Div, vengono dichiarati altri quattro div. Ogni div si riferiva al singolo flex. Aggiungeremo lo stile in linea qui per aggiungere colore a ogni flessione. Ogni div è anche ulteriormente intrattenuto con gli ID CSS. Questi ID sono responsabili dell'applicazione di tutti gli effetti sulla flessione disposti in un ordine appropriato.

ID e classe CSS

A questo punto, è necessario elaborare queste due terminologie di CSS. Mentre discutiamo le proprietà CSS colpite, questi ID e le classi svolgono un ruolo essenziale nell'applicazione di qualsiasi effetto sul contenuto di HTML. Ogni volta che parliamo di CSS interni ed esterni, incontriamo ID e lezioni. Questi ID e classi hanno il colore, lo stile di testo, le dimensioni e molti altri effetti sui contenuti dichiarati nella sezione del corpo. Per accedere a questi effetti da classi e ID, dobbiamo menzionare che sono stati nominati nel tag del contenuto, proprio come l'ID "uno". E anche tutti gli ID dal primo al quarto.

Tornando al codice HTML, qui con ogni div o flex interno, abbiamo anche usato il testo che mostrerà l'ordine più chiaramente. Ciò si verifica quando la frase viene formata organizzando la flessione nell'ordine appropriato. La direzione dell'ordine di Flex è la scelta dell'utente. Possiamo numerare la flessione in modo casuale. Questi caselle flessibili si formano quando viene applicato lo stile CSS. Ora consideriamo il codice CSS.

Dichiareremo prima l'ID che appartiene al div esterno all'interno del tag di stile. Questo div specificherà l'area in cui si formano tutti i div interni. Aggiungeremo le proprietà di larghezza, altezza e bordo. Una caratteristica importante che viene utilizzata per formare un flessibile è l'effetto "display". Poiché questa proprietà viene rimossa, nella pagina Web verranno formati rettangoli semplici. Questi flessi verranno formati utilizzando questa proprietà del display:

#uno
Display: flex;

Il flex si forma di solito in direzione orizzontale da sinistra a destra. Va bene, questo era per il div esterno. Per aggiungere dimensioni a tutti i div interni o flex, useremo l'ID "uno" con Div. Queste proprietà includono la larghezza e l'altezza di un singolo blocco o flessione. L'altezza del divista interno singolo è uguale all'altezza del div esterno. Mentre la larghezza del div esterno è divisa in tutti e quattro i div interni. Questo viene fatto dichiarando la descrizione dell'ID riattaccata da ogni flessione all'interno del tag con i diversi nomi ID per ciascun flex. Ogni nome di div viene dato secondo l'ordine. Ad esempio, il primo div contiene l'ordine come 1. Non importa in quale ordine si dichiari il codice in CSS o HTML, ma il numero dell'ordine deciderà l'ordine di ciascun flessione.

Div#primo
Ordine: 1

Chiudi tutti i tag. Ora, salva il codice con l'estensione HTML per aprirlo come testo e una pagina Web.

Durante l'esecuzione, all'interno del browser, vedrai che l'ordine in cui hai definito ciascun div interno o il flessibile viene visualizzato con i blocchi dei rispettivi colori, rendendo il flex in ordine corretto. Inoltre, il testo aggiunto con ciascun tag DIV interno descrive che la frase è formata organizzando la flessione in ordine. Ciò dimostra che l'ordine che abbiamo menzionato è seguito con precisione.

Ordine inverso di Flex

Con Flexbox e Flex Creation, è visibile che non è necessario menzionare alcun flusso flessibile nel codice. Per impostazione predefinita, il flusso flessibile è in direzione orizzontale e l'ordine è seguito allo stesso modo descritto, ovvero per impostazione predefinita dell'ordine ascendente. Ma, una volta che hai dichiarato l'ordine di Flex nella creazione di flessibilità, puoi invertirlo menzionando la direzione del flex.

#uno
Direzione flessibile: reviso in riga;

Questa proprietà viene aggiunta a Flexbox o al Div esterno in quanto è responsabile del contenimento di flessioni interne al suo interno. E se si desidera utilizzare l'ordine predefinito, rimuovere completamente la proprietà di questa direzione o aggiungere la direzione flessibile come "riga". Farà di nuovo l'ordine ascendente.

Durante l'esecuzione, vedrai che tutto l'ordine di Flex è invertito, puoi vedere chiaramente attraverso i colori di Flex e il testo della frase è invertito di conseguenza.

Flessione verticale

Come abbiamo descritto in precedenza, la direzione di Flex non è descritta. Per impostazione predefinita, è nella direzione orizzontale con una sola colonna e più righe. Ma, per creare una flessione verticale, quindi la direzione del Flexbox viene cambiata dalla riga alle colonne.

#uno
Direzione flessibile: colonna;

Utilizzando questa funzione, verrà formata una Flexbox verticale, avendo intatto tutta la Flex Div, e l'ordine di tutto il Flex sarà lo stesso.

Riordinare flexbox

Il Flexbox può essere riordinato specificando qualsiasi flessione all'interno della scatola che arriverà in prima posizione. Abbiamo scelto il terzo a cui viene dato un ordine di -1, il colore del testo viene cambiato da nero a rosso e la dimensione è anche aumentata per discriminarlo dagli altri.

Questo terzo flex verrà rimosso dall'elenco degli ordini. In questo modo, l'ordine non sarà mantenuto. La scatola che arriverà alla prima posizione disturberà l'ordine dell'intero div.

Durante l'esecuzione, vedrai che il primo blocco viene spostato verso destra per formare un posto per il 3^Rd bloccare. In questo modo, possiamo riordinare la Flexbox specificando qualsiasi flessione.

Conclusione

In questo articolo, abbiamo cercato di descrivere la proprietà CSS Flex Order creando un contenuto Flexbox e Flex al suo interno. L'ordine flessibile viene applicato aggiungendo colori e testo al flex che mostra che l'ordine che abbiamo menzionato viene mantenuto. Inoltre, possiamo invertire l'ordine menzionando il flusso di direzione flessibile in ordine invertito. La direzione orizzontale è la direzione predefinita della flessione; Può anche essere modificato nella direzione verticale modificando la direzione della riga nella colonna. Tutti questi effetti sono spiegati utilizzando i codici specificati per spiegare il concetto di ordine flessibile.

.