Qu'est-ce que la mise en page flexible ? Application de base de la mise en page flexible flex (avec code)-tutoriel HTML-php.cn

Qu'est-ce que la mise en page flexible ? Application de base de la mise en page flexible flex (avec code)

不言

Libérer： 2018-08-01 14:55:10

original

4432 Les gens l'ont consulté

Qu'est-ce que la mise en page flexible ? La mise en page flexible (flex), comme son nom l'indique, est une méthode de mise en page. De nos jours, pratiquement tous les navigateurs prennent en charge la mise en page flexible. Ainsi, ce que cet article partagera ensuite avec vous est l'application de base du flex de mise en page flexible.

Comment appliquer la disposition élastique, le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

Copier après la connexion

Les résultats d'exécution sont les suivants :

Quest-ce que la mise en page flexible ? Application de base de la mise en page flexible flex (avec code)

Paramètres du conteneur

flex a 6 propriétés qui peuvent être définies :

flex-direction:row (axe principal de gauche à droite) à droite, par défaut) / row- reverse (axe principal de droite à gauche) / column (axe principal de haut en bas) / column-reverse (axe principal de bas en haut) détermine la direction de l'axe principal

flex-wrap:nowrap (par défaut, pas de retour à la ligne) / wrap (Retour à la ligne) / wrap-reverse (Retour à la ligne, première ligne ci-dessous) Détermine la méthode de retour à la ligne lorsque les éléments ne peuvent pas être disposés sur un axe

flex-flow : Il s'agit de la valeur par défaut du mode abréviation des deux attributs ci-dessus : flex -flow:row nowrap.

justify-content : flex-start (par défaut, aligné à gauche) / flex-end (aligné à droite) / center (center) / space-between (justifie les deux extrémités, espacement égal entre les éléments) /
espace autour (l'espace entre chaque article est égal, donc l'espace entre les articles est deux fois plus grand que le prix entre l'article et la bordure) détermine l'alignement des articles sur l'axe principal) ; space-between/around est utile lors de l'ajustement adaptatif de l'espacement

align-items : flex-start (alignement du point de départ de l'axe transversal) / flex-end (alignement du point final de l'axe transversal) / center (alignement du point final de l'axe transversal) Alignement du point médian)/baseline (alignement de la ligne de base de la première ligne de texte de l'élément)/stretch (valeur par défaut, si l'élément ne définit pas de hauteur ou est défini sur auto , l'article remplira la hauteur de tout le conteneur). Définir l'alignement des éléments sur l'axe transversal

align-content: flex-start (aligné avec le point de départ de l'axe transversal) / flex-end (aligné avec le point final de l'axe transversal) / center (aligné avec le centre de l'axe transversal) Alignement des points) /
espace-entre (aligné avec les deux extrémités de l'axe transversal, les intervalles entre les axes sont uniformément répartis) / espace-autour (les intervalles des deux côtés de les axes sont égaux, donc l'espacement entre les axes est un rapport La distance entre l'axe et la bordure est doublée)
/ étirement (valeur par défaut, l'axe occupe tout l'axe transversal). Définir l'alignement de plusieurs axes. Si le projet a son propre axe, cet attribut ne fonctionnera pas

Paramètres des propriétés du projet

ordre : Définir l'ordre des éléments, Le plus le nombre est petit, plus il est disposé haut. La valeur par défaut est 0.

flex-grow : Définit le taux de grossissement de l'élément. La valeur par défaut est 0. Par défaut, l'élément ne sera pas agrandi même s'il y a. est l'espace restant. La direction de la mise à l'échelle est la direction de la direction flexible.

flex-shrink : Définissez le taux de rétrécissement de l'élément. La valeur par défaut est 1. Lorsqu'il n'y a pas suffisamment d'espace, l'élément rétrécira. Une valeur de 0 signifie aucune mise à l’échelle. La direction de la mise à l’échelle est la direction de la flexion.

flex-basis : Définit l'espace de l'axe principal (taille principale) occupé par l'élément avant d'allouer l'espace excédentaire. Le navigateur ne calcule pas s'il y a un excès d'espace sur l'axe principal en fonction de cet attribut. est auto, qui correspond à la taille originale de l'article. flex-basis : 80px ; la largeur (la direction est la ligne) est définie sur 80px ;

flex : est l'abréviation des trois attributs ci-dessus, la valeur par défaut est 0 1 auto. (1 1 auto ) et none (0 0 auto)

align-self : Cet attribut permet aux éléments retardés d'être alignés différemment des autres éléments, remplaçant la valeur de l'attribut align-items. La valeur par défaut est auto, ce qui signifie hériter de l'attribut align-items de l'élément parent, ou stretch s'il n'y a pas d'élément parent.

align-self : auto/flex-start/flex-end/center/baseline/stretch flex-basis : La différence entre lorsque la valeur est 0 et auto (par défaut) : le premier ne calcule pas la totalité élément, puis L'autre est calculé quel que soit le contenu, donc si la mise en page nécessite la configuration en pourcentage de chaque élément, flex-basis doit être défini sur 0.

Recommandations associées :

Introduction à la mise en page flexible (Flex) en HTML (avec code)

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!