Disposizione

Podcast CSS - 009: Layout .

Immagina di lavorare come sviluppatore e un collega designer ti consegna il design per un nuovo sito web. Il design presenta ogni tipo di layout e composizioni interessanti: layout bidimensionali che tengono conto della larghezza e dell'altezza dell'area visibile, nonché layout che devono essere fluidi e flessibili. Come decidi il modo migliore per applicare uno stile a questi elementi con CSS?

CSS offre vari modi per risolvere i problemi di layout, su un asse orizzontale, verticale o anche su entrambi. Scegliere il metodo di layout giusto per un contesto può essere difficile, e spesso potresti aver bisogno di più metodi di layout per risolvere il problema. Per aiutarti, nei seguenti moduli imparerai le funzionalità uniche di ciascun meccanismo di layout CSS per prendere decisioni più consapevoli.

Layout: una breve cronologia

Agli albori del web, progetti più complessi di un semplice documento sono stati predisposti con elementi <table>. La separazione del codice HTML dagli stili visivi è diventata più semplice quando il linguaggio CSS è stato ampiamente adottato dai browser alla fine degli anni '90. CSS ha aperto le porte agli sviluppatori che hanno potuto modificare completamente l'aspetto e il design di un sito web senza mai toccare l'HTML. Questa nuova funzionalità ha ispirato progetti come The CSS Zen Garden, che è stato creato per dimostrare la potenza del CSS e incoraggiare un maggior numero di sviluppatori a impararlo.

CSS si è evoluto di pari passo con l'evoluzione delle nostre esigenze di web design e tecnologia del browser. Puoi scoprire come il layout CSS e il nostro approccio al layout si sono evoluti nel tempo in questo articolo di Rachel Andrew.

Layout: presente e futuro

I CSS moderni dispongono di strumenti di layout eccezionalmente potenti. Abbiamo sistemi dedicati al layout e daremo un'occhiata generale a ciò che abbiamo a disposizione, prima di analizzare più in dettaglio Flexbox e Grid nei prossimi moduli.

Informazioni sulla proprietà display

La proprietà display esegue due operazioni. La prima cosa che fa è determinare se la scatola a cui viene applicata agisce come in linea o in blocco.

.my-element {
  display: inline;
}

Gli elementi incorporati si comportano come le parole in una frase. Sono uno accanto all'altro nella direzione in linea. Elementi come <span> e <strong>, che sono solitamente utilizzati per applicare stili di testo all'interno di elementi che contengono elementi quali <p> (paragrafo), sono in linea per impostazione predefinita. Inoltre, preservano lo spazio vuoto circostante.

Non puoi impostare larghezza e altezza esplicite negli elementi in linea. Eventuali margini e spaziatura a livello di blocco verranno ignorati dagli elementi circostanti.

.my-element {
    display: block;
}

Gli elementi blocco non sono affiancati. Creano una nuova linea per sé stessi. A meno che non venga modificato da un altro codice CSS, un elemento di blocco si espanderà alle dimensioni della dimensione in linea, che coprono quindi l'intera larghezza in modalità di scrittura orizzontale. Verrà rispettato il margine su tutti i lati di un elemento di blocco.

.my-element {
    display: flex;
}

La proprietà display determina anche il comportamento degli elementi secondari di un elemento. Ad esempio: Se imposti la proprietà display su display: flex, la casella diventa un riquadro a livello di blocco, e converte anche gli elementi figlio in elementi flessibili. Ciò abilita le proprietà flessibili che controllano allineamento, ordinamento e flusso.

Flexbox e griglia

Esistono due meccanismi principali di layout che creano regole di layout per più elementi: flexbox e grid. Condividono somiglianze, ma sono progettati per risolvere diversi problemi di layout.

Flexbox

.my-element {
    display: flex;
}

Flexbox è un meccanismo di layout per layout unidimensionali. Layout su un singolo asse, orizzontalmente o verticalmente. Per impostazione predefinita, flexbox allineerà gli elementi secondari dell'elemento uno accanto all'altro, in linea, e allungale nella direzione del blocco, in modo che abbiano tutte la stessa altezza.

Gli elementi rimarranno sullo stesso asse e non verranno aggregati quando esauriscono lo spazio. proveranno invece a schiacciarsi sulla stessa linea l'uno dell'altro. Questo comportamento può essere modificato utilizzando le proprietà align-items, justify-content e flex-wrap.

Flexbox converte anche gli elementi secondari in elementi flessibili, il che significa che è possibile scrivere regole sul loro comportamento all'interno di un container flessibile. Puoi modificare l'allineamento, l'ordine e la giustificazione di un singolo elemento. Puoi anche modificare il modo in cui si riduce o aumenta utilizzando la proprietà flex.

.my-element div {
    flex: 1 0 auto;
}

La proprietà flex è un'abbreviazione di flex-grow, flex-shrink e flex-basis. Puoi espandere l'esempio precedente in questo modo:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Gli sviluppatori forniscono queste regole di basso livello per suggerire a un browser il comportamento del layout quando viene ostacolato dalle dimensioni dei contenuti e dell'area visibile. Questo lo rende un meccanismo molto utile per il responsive web design.

Griglia

.my-element {
    display: grid;
}

La griglia è simile per molti aspetti a flexbox, ma è progettato per controllare i layout multiasse anziché quelli ad asse singolo (spazio verticale o orizzontale).

La griglia consente di scrivere regole di layout su un elemento che ha display: grid, e introduce alcune nuove primitive per lo stile del layout, come le funzioni repeat() e minmax(). Un'unità di griglia utile è l'unità fr, che è una frazione dello spazio rimanente, in cui puoi creare griglie tradizionali da 12 colonne. con uno spazio tra un elemento e l'altro, con tre proprietà CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Questo esempio sopra mostra un layout ad asse singolo. dove flexbox tratta prevalentemente gli elementi come un gruppo, ti offre un controllo preciso sul loro posizionamento in due dimensioni. Possiamo definire che il primo elemento di questa griglia occupa 2 righe e 3 colonne:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Le proprietà grid-row e grid-column indicano al primo elemento della griglia di estendersi fino all'inizio della quarta colonna, dalla prima colonna e si estende fino alla terza riga, dalla prima riga.

Layout flusso

Se non utilizzi griglia o flexbox, vengono visualizzati nel flusso normale. Esistono diversi metodi di layout che puoi utilizzare per regolare il comportamento e la posizione degli elementi durante il flusso normale.

Blocco in linea

Ricordi come gli elementi circostanti non rispettano il margine del blocco e la spaziatura interna in un elemento incorporato? Con inline-block, puoi causare questo problema.

p span {
    display: inline-block;
}

L'uso di inline-block fornisce un rettangolo che presenta alcune delle caratteristiche di un elemento a livello di blocco, ma continua a essere in linea con il testo.

p span {
    margin-top: 0.5rem;
}

Float

Se hai un'immagine all'interno di un paragrafo di testo, non sarebbe pratico che il testo venga avvolto attorno all'immagine come si potrebbe vedere su un giornale? Puoi farlo con i dati mobili.

img {
    float: left;
    margin-right: 1em;
}

La proprietà float indica a un elemento di essere "fluttuante" nella direzione specificata. L'immagine in questo esempio deve spostarsi a sinistra, che permette di "aggregare" gli elementi di pari livello intorno ad essa. Puoi indicare a un elemento di far fluttuare left, right o inherit.

Layout a più colonne

Se hai un elenco molto lungo di elementi, come un elenco di tutti i paesi del mondo, l'utente potrebbe dover scorrere molto e far sprecare tempo. Può anche creare spazi vuoti in eccesso nella pagina. Con CSS multicolonna, puoi suddividerlo in più colonne per risolvere entrambi i problemi.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

In questo modo, il lungo elenco viene suddiviso automaticamente in due colonne e viene aggiunto uno spazio vuoto tra le due colonne.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Invece di impostare il numero di colonne in cui suddividere i contenuti, puoi anche definire la larghezza minima desiderata, utilizzando column-width. Mano a mano che si rende disponibile più spazio nell'area visibile, verranno create automaticamente altre colonne e man mano che lo spazio si riduce, diminuirà anche le colonne. Ciò è molto utile nei contesti di reindirizzamento del web design.

Posizionamento della

L'ultima parte di questa panoramica sui meccanismi di layout è il posizionamento. La proprietà position modifica il comportamento di un elemento nel normale flusso del documento, e come si relaziona con gli altri elementi. Le opzioni disponibili sono relative, absolute, fixed e sticky. Il valore predefinito è static.

.my-element {
  position: relative;
  top: 10px;
}

Questo elemento viene spostato di 10 px verso il basso in base alla sua posizione attuale nel documento. in quanto è posizionata rispetto a se stessa. Se aggiungi position: relative a un elemento, questo diventa anche il blocco contenitore di tutti gli elementi secondari con position: absolute. Ciò significa che l'elemento figlio verrà riposizionato in questo particolare elemento, invece dell'elemento principale relativo più in alto, quando è applicata una posizione assoluta.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Se imposti position su absolute, l'elemento viene interrotto dall'attuale flusso dei documenti. Ciò significa due cose:

1. Puoi posizionare questo elemento dove vuoi, utilizzando top, right, bottom e left nell'elemento principale più prossimo.
2. Tutti i contenuti attorno a un elemento assoluto si ridimensionano per riempire lo spazio rimanente lasciato da quell'elemento.

Un elemento con un valore position pari a fixed si comporta in modo simile a absolute, in cui il principale è l'elemento <html> principale. Gli elementi con posizione fissa rimangono ancorati dall'angolo in alto a sinistra in base ai valori top, right, bottom e left che hai impostato.

Puoi ottenere le risposte aspetti fissi di fixed e gli aspetti più prevedibili che rispettano il flusso dei documenti di relative utilizzando sticky. Con questo valore, quando l'area visibile scorre oltre l'elemento, rimane ancorato ai valori top, right, bottom e left che hai impostato.

Conclusione

Il layout CSS offre una grande scelta e flessibilità. Per analizzare ulteriormente le potenzialità di Flexbox e Grid di CSS, continua con i prossimi moduli.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di layout