Maison > Article > interface Web > Explication détaillée de la propriété display:flex||inline-flex en CSS

Explication détaillée de la propriété display:flex||inline-flex en CSS

巴扎黑original: 2018-05-16 09:12:1216360parcourir

Cet article vous présente principalement les propriétés display:flex et display:inline-flex en CSS L'article vous présente les effets d'utilisation de display:flex et display:inline-flex à travers deux exemples de code. peut s'y référer, jetons un coup d'œil ci-dessous.

Introduction

Flex est l'abréviation de Flexible Box, qui signifie « disposition élastique » et est utilisé pour offrir une flexibilité maximale pour les boîtes en forme de boîte. modèles . N’importe quel conteneur peut être désigné comme une mise en page Flex.

flex : afficher l'objet sous forme de boîte flexible

inline-flex : afficher l'objet sous forme de boîte flexible au niveau du bloc en ligne

exemple de code flexible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父p设置该属性*/
    }
    .main>p{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
      /*float:left;这个属性就不需要了，会自动浮动*/
    }
  </style>
</head>
<body>
  <p class="main">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </p>
</body>
</html>

Le rendu est le suivant :

display:inline-flex exemple de code

Si vous voulez voir l'effet, remplacez display:flex ci-dessus par display : inline-flex et supprimez width:200px. Avant de tester, certaines personnes peuvent penser que .main occupera toute la ligne. Cependant, le résultat du test est qu'il adaptera la largeur et la hauteur en fonction de la taille p de tous les sous-éléments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父p设置该属性*/
    }
    .main>p{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
      /*float:left;这个属性就不需要了，会自动浮动*/
    }
  </style>
</head>
<body>
  <p class="main">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </p>
</body>
</html>

<.> Le rendu est le suivant :

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode CSS pour résoudre l'écart causé par display:inline-block layout;Article suivant：Méthode CSS pour résoudre l'écart causé par display:inline-block layout;

Articles Liés

Voir plus