bookmark_borderbookmark
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Dans ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page responsive avec des éléments enfants flexibles et placés automatiquement. Génial. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax(), que vous vous souvenez par l'acronyme RAM.
Vous utilisez à nouveau repeat(), mais cette fois, vous utilisez le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet le positionnement automatique de ces éléments enfants. Ces enfants ont une valeur minimale de base de 150px avec une valeur maximale 1fr. Cela signifie que sur les petits écrans, ils occuperont toute la largeur de 1fr et, lorsqu'ils auront chacun 150px de large, ils commenceront à s'insérer sur la même ligne.
Avec auto-fit, toutes les pistes complètement vides sont réduites à 0, et les pistes remplies s'agrandissent pour occuper leur espace. Toutefois, si vous remplacez cette valeur par auto-fill, les pistes vides occupent le même espace que si elles étaient remplies:
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2023/10/25 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2023/10/25 (UTC)."],[],[]]