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

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

巴扎黑

Libérer： 2018-05-16 09:12:12

original

16362 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

<.> 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!