bookmark_borderbookmark
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Per questo settimo esempio, combina alcuni dei concetti che hai già imparato per creare un layout adattabile con elementi secondari flessibili e posizionati automaticamente. Piuttosto piacevole. I termini chiave da ricordare qui sono repeat, auto-(fit|fill) e minmax(), che ricordi con l'acronimo RAM.
Stai utilizzando di nuovo repeat(), ma questa volta la parola chiave auto-fit anziché un valore numerico esplicito. In questo modo viene attivato il posizionamento automatico di questi elementi secondari. Questi elementi secondari hanno un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che su schermi più piccoli occuperanno tutta la larghezza di 1fr e, man mano che raggiungono ciascuno 150px di larghezza, inizieranno a scorrere sulla stessa linea.
Con auto-fit, tutte le tracce completamente vuote verranno compresse a 0 e le tracce piene occuperanno spazio. Tuttavia, se la modifichi in auto-fill, le tracce vuote occuperanno la stessa quantità di spazio che occuparebbero se riempite:
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2023-10-25 UTC."],[],[]]