Comment puis-je créer une grille carrée réactive à l'aide de Flexbox et CSS ?-tutoriel CSS-php.cn

Comment puis-je créer une grille carrée réactive à l'aide de Flexbox et CSS ?

Barbara Streisand

Libérer： 2024-11-26 04:40:08

original

511 Les gens l'ont consulté

How Can I Create a Responsive Square Grid Using Flexbox and CSS?

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

.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;
}

Copier après la connexion

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!