La guida completa a CSS Flexbox - Corso CSS Flexbox

La nostra guida completa alla flexbox CSS. Flexbox è un'abilità indispensabile per gli sviluppatori web. Flexbox ti offre tutti gli strumenti di cui hai bisogno per organizzare correttamente i contenuti all'interno di contenitori flessibili.

Una volta imparato Flexbox, ti chiederai come sei mai riuscito a creare siti web senza di esso. Questo corso ti aggiorna il più rapidamente possibile.

Flexbox ti offre tutti gli strumenti di cui hai bisogno per organizzare correttamente i contenuti all'interno di contenitori flessibili. Dato che al giorno d'oggi tutti i siti web devono essere flessibili e reattivi, Flexbox è un'abilità indispensabile per gli sviluppatori web.

Il corso contiene quanto segue:

Il tuo primo layout Flexbox
Asse principale e asse trasversale
Giustificare il contenuto
Oggetti di posizionamento
La proprietà flessibile
Allineare gli elementi
Colonna di direzione flessibile
Avvolgimento
Flex crescere, restringere
Ordine
Creazione di una barra di navigazione reattiva
Creazione di una griglia di immagini Flexbox

Sfondo

Il Flexbox Layoutmodulo (Flexible Box) mira a fornire un modo più efficiente per disporre, allineare e distribuire lo spazio tra gli oggetti in un contenitore, anche quando la loro dimensione è sconosciuta e/o dinamica (da qui la parola "flex").

L'idea principale alla base del layout flessibile è quella di dare al contenitore la possibilità di modificare la larghezza/altezza (e l'ordine) dei suoi articoli per riempire al meglio lo spazio disponibile (principalmente per adattarsi a tutti i tipi di dispositivi di visualizzazione e dimensioni dello schermo). Un contenitore flessibile espande gli elementi per riempire lo spazio libero disponibile o li restringe per evitare traboccamenti.

Ancora più importante, il layout flexbox è indipendente dalla direzione rispetto ai layout regolari (blocco che è basato verticalmente e in linea che è basato orizzontalmente). Sebbene funzionino bene per le pagine, mancano di flessibilità (nessun gioco di parole) per supportare applicazioni grandi o complesse (specialmente quando si tratta di cambiare orientamento, ridimensionare, allungare, restringere, ecc.).

Nota: il layout Flexbox è più appropriato per i componenti di un'applicazione e layout su scala ridotta, mentre il layout Grid è destinato a layout su scala più ampia.

Nozioni di base e terminologia

Poiché flexbox è un intero modulo e non una singola proprietà, coinvolge molte cose, incluso l'intero insieme di proprietà. Alcuni di essi sono pensati per essere posizionati sul contenitore (elemento genitore, noto come “contenitore flessibile”) mentre gli altri sono pensati per essere posizionati sui bambini (detti “elementi flessibili”).

Se il layout "regolare" si basa su entrambe le direzioni di flusso in blocco e in linea, il layout flessibile si basa su "direzioni di flusso flessibile". Si prega di dare un'occhiata a questa figura dalle specifiche, che spiega l'idea principale alla base del layout flessibile.

Un diagramma che spiega la terminologia flexbox. La dimensione lungo l'asse principale del flexbox è chiamata dimensione principale, l'altra direzione è la dimensione trasversale. Queste dimensioni hanno un inizio principale, un'estremità principale, un inizio incrociato e un'estremità incrociata.

Gli elementi saranno disposti seguendo l'asse main axis(da main-starta main-end) o l'asse trasversale (da cross-starta cross-end).

asse principale : l'asse principale di un contenitore flessibile è l'asse principale lungo il quale sono disposti gli elementi flessibili. Attenzione, non è necessariamente orizzontale; dipende dalla flex-directionproprietà (vedi sotto).
inizio principale | main-end - Gli articoli flessibili vengono posizionati all'interno del contenitore a partire dall'inizio principale e fino all'estremità principale.
dimensione principale : la larghezza o l'altezza di un articolo flessibile, qualunque sia la dimensione principale, è la dimensione principale dell'articolo. La proprietà della dimensione principale dell'elemento flessibile è la proprietà 'width' o 'height', a seconda di quale si trovi nella dimensione principale.
asse trasversale - L'asse perpendicolare all'asse principale è chiamato asse trasversale. La sua direzione dipende dalla direzione dell'asse principale.
inizio incrociato | cross-end : le linee flessibili vengono riempite con gli articoli e posizionate nel contenitore iniziando dal lato di inizio trasversale del contenitore flessibile e andando verso il lato di estremità trasversale.
dimensione trasversale : la larghezza o l'altezza di un elemento flessibile, a seconda di quale si trovi nella dimensione trasversale, è la dimensione trasversale dell'elemento. La proprietà cross size è qualunque tra 'width' o 'height' che si trova nella dimensione cross.

Proprietà per il padre

(contenitore flessibile)

Schermo

Questo definisce un contenitore flessibile; inline o block a seconda del valore dato. Abilita un contesto flessibile per tutti i suoi figli diretti.

.container {
  display: flex; /* or inline-flex */
}

Si noti che le colonne CSS non hanno alcun effetto su un contenitore flessibile.

direzione flessibile

vengono visualizzati i quattro possibili valori della direzione di flessione: dall'alto verso il basso, dal basso verso l'alto, da destra a sinistra e da sinistra a destra

Questo stabilisce l'asse principale, definendo così la direzione in cui gli elementi flessibili vengono posizionati nel contenitore flessibile. Flexbox è (a parte il wrapping opzionale) un concetto di layout unidirezionale. Pensa agli articoli flessibili come se fossero disposti principalmente in righe orizzontali o colonne verticali.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row(predefinito): da sinistra a destra in ltr; da destra a sinistra dentrortl
row-reverse: da destra a sinistra in ltr; da sinistra a destra dentrortl
column: come rowma dall'alto verso il basso
column-reverse: come row-reversema dal basso verso l'alto

flex-wrap

due file di scatole, la prima che si avvolge sulla seconda

Per impostazione predefinita, gli elementi flessibili cercheranno tutti di adattarsi a una riga. Puoi cambiarlo e consentire agli elementi di eseguire il wrapping secondo necessità con questa proprietà.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(predefinito): tutti gli elementi flessibili saranno su una riga
wrap: gli elementi flessibili si avvolgeranno su più righe, dall'alto verso il basso.
wrap-reverse: gli elementi flessibili andranno a capo su più righe dal basso verso l'alto.

flusso flessibile

Questa è una scorciatoia per le proprietà flex-directione flex-wrap, che insieme definiscono gli assi principale e trasversale del contenitore flessibile. Il valore predefinito è row nowrap.

.container {
  flex-flow: column wrap;
}

giustificare-contenuto

elementi flessibili all'interno di un contenitore flessibile che mostrano le diverse opzioni di spaziatura

Questo definisce l'allineamento lungo l'asse principale. Aiuta a distribuire lo spazio extra libero rimanente quando tutti gli elementi flessibili su una linea non sono flessibili o sono flessibili ma hanno raggiunto la loro dimensione massima. Esercita anche un certo controllo sull'allineamento degli elementi quando superano la linea.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

flex-start(predefinito): gli elementi vengono impacchettati verso l'inizio della direzione flessibile.
flex-end: gli articoli vengono imballati verso la fine della direzione di flessione.
start: gli articoli vengono imballati verso l'inizio della writing-modedirezione.
end: gli articoli vengono imballati verso la fine della writing-modedirezione.
left: gli elementi vengono impacchettati verso il bordo sinistro del contenitore, a meno che ciò non abbia senso con flex-direction, quindi si comporta come start.
right: gli elementi vengono impacchettati verso il bordo destro del contenitore, a meno che ciò non abbia senso con flex-direction, quindi si comporta come start.
center: gli elementi sono centrati lungo la linea
space-between: gli articoli sono distribuiti uniformemente nella linea; il primo elemento è sulla riga iniziale, l'ultimo elemento sulla riga finale
space-around: gli elementi sono distribuiti uniformemente nella riga con uguale spazio intorno a loro. Nota che visivamente gli spazi non sono uguali, poiché tutti gli elementi hanno lo stesso spazio su entrambi i lati. Il primo oggetto avrà un'unità di spazio contro il bordo del contenitore, ma due unità di spazio tra l'oggetto successivo perché quell'oggetto successivo ha la propria spaziatura che si applica.
space-evenly: gli elementi sono distribuiti in modo che la spaziatura tra due elementi qualsiasi (e lo spazio ai bordi) sia uguale.

Si noti che il supporto del browser per questi valori è sfumato. Ad esempio, space-betweennon ho mai ricevuto supporto da alcune versioni di Edge e inizio/fine/sinistra/destra non sono ancora in Chrome. MDN ha grafici dettagliati . I valori più sicuri sono flex-start, flex-ende center.

Ci sono anche due parole chiave aggiuntive che puoi abbinare a questi valori: safee unsafe. L'utilizzo safegarantisce che, comunque si esegua questo tipo di posizionamento, non è possibile eseguire il push di un elemento in modo tale che venga visualizzato fuori dallo schermo (ad esempio fuori dall'alto) in modo tale che anche il contenuto non possa essere fatto scorrere (chiamata "perdita di dati") .

align-elementi

dimostrazione delle diverse opzioni di allineamento, come tutte le scatole attaccate alla parte superiore di un genitore flessibile, alla parte inferiore, allungate o lungo una linea di base

Questo definisce il comportamento predefinito per il modo in cui gli elementi flessibili sono disposti lungo l' asse trasversale sulla linea corrente. Pensala come la justify-contentversione per l'asse trasversale (perpendicolare all'asse principale).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

stretch(predefinito): allungare per riempire il contenitore (rispettare comunque min-width/max-width)
flex-start/ start/ self-start: gli elementi vengono posizionati all'inizio dell'asse trasversale. La differenza tra questi è sottile e riguarda il rispetto delle flex-directionregole o delle writing-moderegole.
flex-end/ end/ self-end: gli elementi vengono posizionati all'estremità dell'asse trasversale. La differenza è ancora una volta sottile e riguarda il rispetto flex-directiondelle regole contro writing-modele regole.
center: gli elementi sono centrati nell'asse trasversale
baseline: gli elementi sono allineati così come le loro linee di base allineate

Le parole chiave del modificatore safee unsafepossono essere utilizzate insieme a tutte le altre parole chiave (sebbene si noti il supporto del browser ) e si occupano di aiutarti a prevenire l'allineamento degli elementi in modo tale che il contenuto diventi inaccessibile.

contenuto di allineamento

esempi della proprietà align-content in cui un gruppo di elementi si raggruppa in alto o in basso, o si allunga per riempire lo spazio o ha spaziatura.

Questo allinea le linee di un contenitore flessibile all'interno quando c'è spazio extra nell'asse trasversale, in modo simile a come justify-contentallinea i singoli elementi all'interno dell'asse principale.

Nota: questa proprietà non ha effetto quando è presente una sola riga di elementi flessibili.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

flex-start/ start: articoli imballati all'inizio del contenitore. Il (più sostenuto) flex-startonora il flex-directionmentre startonora la writing-moderegia.
flex-end/ end: articoli imballati fino alla fine del contenitore. Il (più supporto) flex-endonora il flex-directionwhile end onora la writing-modedirezione.
center: elementi centrati nel contenitore
space-between: articoli distribuiti uniformemente; la prima riga è all'inizio del contenitore mentre l'ultima è alla fine
space-around: elementi distribuiti uniformemente con uguale spazio attorno a ciascuna riga
space-evenly: gli elementi sono distribuiti uniformemente con uguale spazio attorno a loro
stretch(predefinito): le linee si allungano per occupare lo spazio rimanente

Le parole chiave del modificatore safee unsafepossono essere utilizzate insieme a tutte le altre parole chiave (sebbene si noti il supporto del browser ) e si occupano di aiutarti a prevenire l'allineamento degli elementi in modo tale che il contenuto diventi inaccessibile.

Proprietà per i bambini

(articoli flessibili)

ordine

Diagramma che mostra l'ordine della scatola flessibile. Un contenitore con gli elementi 1 1 1 2 3, -1 1 2 5 e 2 2 99.

Per impostazione predefinita, gli elementi flessibili sono disposti nell'ordine di origine. Tuttavia, la orderproprietà controlla l'ordine in cui appaiono nel contenitore flessibile.

.item {
  order: 5; /* default is 0 */
}

crescita flessibile

due righe di elementi, la prima ha tutti gli elementi della stessa dimensione con numeri di crescita flessibile uguali, la seconda con l'elemento centrale al doppio della larghezza perché il suo valore è 2 anziché 1.

Questo definisce la capacità di un elemento flessibile di crescere se necessario. Accetta un valore senza unità che funge da proporzione. Determina la quantità di spazio disponibile all'interno del contenitore flessibile che l'articolo dovrebbe occupare.

Se tutti gli elementi sono flex-growimpostati su 1, lo spazio rimanente nel contenitore verrà distribuito equamente a tutti i figli. Se uno dei bambini ha un valore di 2, lo spazio rimanente occuperebbe il doppio dello spazio degli altri (o almeno ci proverà).

.item {
  flex-grow: 4; /* default 0 */
}

I numeri negativi non sono validi.

flex-shrink

Questo definisce la capacità di un elemento flessibile di ridursi se necessario.

.item {
  flex-shrink: 3; /* default 1 */
}

I numeri negativi non sono validi.

base flessibile

Questo definisce la dimensione predefinita di un elemento prima che lo spazio rimanente venga distribuito. Può essere una lunghezza (es. 20%, 5rem, ecc.) o una parola chiave. La autoparola chiave significa "guarda la mia proprietà di larghezza o altezza" (che è stata temporaneamente eseguita dalla main-sizeparola chiave fino a quando non è stata deprecata). La contentparola chiave significa "dimensionalo in base al contenuto dell'elemento" - questa parola chiave non è ancora ben supportata, quindi è difficile da testare e più difficile sapere cosa fanno i suoi fratelli , max-contente min-content.fit-content

.item {
  flex-basis:  | auto; /* default auto */
}

Se impostato su 0, lo spazio extra attorno al contenuto non viene preso in considerazione. Se impostato su auto, lo spazio extra viene distribuito in base al relativo flex-growvalore.

flettere

Questa è la scorciatoia per flex-grow, flex-shrinke flex-basiscombinata. Il secondo e il terzo parametro ( flex-shrinke flex-basis) sono facoltativi. Il valore predefinito è 0 1 auto, ma se lo imposti con un singolo valore numerico, è come 1 0.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Si consiglia di utilizzare questa proprietà abbreviata anziché impostare le singole proprietà. La scorciatoia imposta gli altri valori in modo intelligente.

align-self

Un elemento con un valore align-self è posizionato lungo la parte inferiore di un genitore flessibile anziché in alto dove si trovano tutti gli altri elementi.

align-itemsCiò consente di sovrascrivere l'allineamento predefinito (o quello specificato da ) per i singoli elementi flessibili.

Consultare la align-itemsspiegazione per comprendere i valori disponibili.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Si noti che float, cleare vertical-alignnon ha alcun effetto su un elemento flessibile.

Esempi

Partiamo da un esempio molto molto semplice, risolvendo un problema quasi quotidiano: la perfetta centratura. Non potrebbe essere più semplice se usi flexbox.

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

Ciò si basa sul fatto che un margine impostato autoin un contenitore flessibile assorbe spazio extra. Quindi impostare un margine verticale di autorenderà l'elemento perfettamente centrato su entrambi gli assi.

Ora usiamo alcune altre proprietà. Considera un elenco di 6 elementi, tutti con dimensioni fisse, ma che possono essere ridimensionati automaticamente. Vogliamo che siano distribuiti uniformemente sull'asse orizzontale in modo che quando ridimensioniamo il browser, tutto si ridimensioni bene e senza media query.

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

Fatto. Tutto il resto è solo un problema di stile. Di seguito è una penna con questo esempio. Assicurati di andare su CodePen e prova a ridimensionare le finestre per vedere cosa succede.

Fallback di incorporamento di CodePen

Proviamo qualcos'altro. Immagina di avere un elemento di navigazione allineato a destra nella parte superiore del nostro sito Web, ma vogliamo che sia centrato su schermi di medie dimensioni e a colonna singola su dispositivi di piccole dimensioni. Abbastanza facile.

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

Fallback di incorporamento di CodePen

Proviamo qualcosa di ancora migliore giocando con la flessibilità degli articoli flex! Che dire di un layout mobile-first a 3 colonne con intestazione e piè di pagina a tutta larghezza. E indipendente dall'ordine di origine.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1\. header
 * 2\. article
 * 3\. aside 1
 * 4\. aside 2
 * 5\. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Fallback di incorporamento di CodePen

Prefisso Flexbox

Flexbox richiede alcuni prefissi del fornitore per supportare la maggior parte dei browser possibili. Non include solo le proprietà che precedono il prefisso del fornitore, ma in realtà ci sono nomi di proprietà e valori completamente diversi. Questo perché le specifiche di Flexbox sono cambiate nel tempo, creando una versione "vecchia", "tweener" e "nuova".

Forse il modo migliore per gestirlo è scrivere nella nuova (e ultima) sintassi ed eseguire il tuo CSS tramite Autoprefixer, che gestisce molto bene i fallback.

In alternativa, ecco un Sass @mixinper aiutarti con alcuni dei prefissi, che ti dà anche un'idea di che tipo di cose devono essere fatte:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

#css

What is GEEK

Buddha Community

La guida completa a CSS Flexbox - Corso CSS Flexbox

Gavin Sserubiri

1618276860

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

Ulices Hermiston

1598618580

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it’s not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what’s the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don’t need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it’s items wherever it’s suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container’s elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it’s already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

#web-development #technology #css3 #flexbox #css #html-css #learning-css #learn-flexbox-css

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

hourly developer

1596530868

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Romolo Morelli

1677899259