J'ai une flexbox avec un contenu emballé. Comment réduire une flexbox à son contenu ? Le problème fondamental que j'essaie de résoudre est le centrage de la flexbox. Cette image décrit mon problème :
Comment puis-je atteindre cet objectif ? Est-ce que cela peut être réalisé avec du CSS pur ? Je ne sais pas à l'avance si Flexbox s'enroulera sur 1, 2 ou 3 colonnes. La largeur de l'élément est connue. La hauteur est de préférence inconnue, mais je pourrais décider d'une hauteur constante si c'est plus facile.
Niwidth:min-content、width:max-content、width:fit-contentniinline-flex< /code> ne semblent faire l'affaire.
JS Fiddle : https://jsfiddle.net/oznts5bv/
.container { display:flex; flex-wrap:wrap; border:1px dashed magenta; } .container div { width:100px; height:60px; border:1px solid black; } 1 2 3 4 5
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
-
À propos de nous
Clause de non-responsabilité
Sitemap
-
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！
Création de deux exemples : en utilisant
display: flex;和display: grid;. La deuxième option vous conviendra peut-être mieux :* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; overflow-y: scroll; } .container { display: flex; flex-wrap: wrap; border: 1px dashed magenta; max-width: min(100%, 302px); } .container div { width: 100px; height: 60px; border: 1px solid black; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }