Un conteneur enfant avec display : inline-flex ne remplit pas automatiquement le conteneur parent. Sa taille dépend de son contenu et des styles supplémentaires qui lui sont appliqués.
Un conteneur enfant avec display: flex remplit automatiquement la largeur du conteneur parent car flex se comporte comme un élément de niveau bloc, qui s'agrandit pour s'adapter à la largeur disponible du parent par défaut.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/style.css" />
</head>
<body>
<h1>inline-flex</h1>
<div>
<p>CSS<br>
</p>
<pre class="brush:php;toolbar:false">body {
background: transparent;
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
background-color: white;
color: black;
}
.inline-flex-c {
display: inline-flex;
background-color: palevioletred;
}
.flex-c {
display: flex;
background-color: chocolate;
}
.child{
border-color: greenyellow;
border-style: solid;
}
Le conteneur flex s'étire pour occuper toute la largeur de son conteneur parent. En revanche, le conteneur inline-flex n'occupe que la largeur requise par son contenu.
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!
Comment définir la police en CSS
Le dernier classement des dix principales bourses du cercle des devises
Combien de types d'interfaces USB existe-t-il ?
Objectif principal du système de fichiers
Windows vérifie l'état d'occupation des ports
Est-il légal d'acheter et de vendre du Bitcoin sur Huobi.com ?
Liste des touches de raccourci Mac
Qu'est-ce qu'un tableau vide en php
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
