Maison > interface Web > tutoriel CSS > le corps du texte

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

巴扎黑
Libérer: 2018-05-16 09:12:12
original
16380 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal