Maison >interface Web >tutoriel CSS >Comment puis-je créer une grille carrée réactive à l'aide de Flexbox et CSS ?
Comment puis-je créer une grille carrée réactive à l'aide de Flexbox et CSS ?
- Barbara Streisandoriginal
- 2024-11-26 04:40:08494parcourir
Grille CSS de carrés avec Flexbox
Comprendre la hauteur et la largeur dans Flexbox
Flexbox vous permet de définir la largeur de éléments utilisant la propriété flex. Cependant, il ne contrôle pas la hauteur des éléments. Flexbox répartira par défaut la hauteur disponible uniformément entre les éléments.
Création d'une grille carrée
Pour obtenir une grille de carrés, à la fois la hauteur et la largeur des carrés doit être égal. Pour ce faire :
- Définissez le rapport d'aspect : La propriété CSS aspect-ratio peut être utilisée pour définir un rapport fixe entre la largeur et la hauteur. Pour les carrés, définissez le rapport hauteur/largeur sur 1/1.
.flex-item {
aspect-ratio: 1 / 1;
}
Grille réactive
Pour créer une grille réactive qui s'ajuste automatiquement à la largeur de la fenêtre :
- Réglez flex sur 1 0 auto : Ceci permet aux éléments de s'agrandir pour s'adapter à la largeur mais les empêche de rétrécir en dessous de leur largeur d'origine.
.flex-item {
flex: 1 0 auto;
}
- Définissez une largeur de conteneur : Spécifiez une valeur fixe ou un pourcentage largeur du conteneur parent pour limiter la largeur totale de la grille.
.flex-container {
width: 100%;
max-width: 800px;
}
Complet Code
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
</body>
.flex-container {
width: 100%;
max-width: 800px;
display: flex;
justify-content: space-around;
height: 50px;
line-height: 30px;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
aspect-ratio: 1 / 1;
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!