Quels sont les avantages de la mise en page flexible HTML5 ?-Questions et réponses frontales-php.cn

Quels sont les avantages de la mise en page flexible HTML5 ?

青灯夜游

Libérer： 2021-03-23 14:18:08

original

2894 Les gens l'ont consulté

La mise en page flexible HTML5 est utilisée pour offrir une flexibilité maximale au modèle de boîte. L'avantage est qu'elle est facile à utiliser et qu'il est facile d'obtenir un certain effet de mise en page selon les règles de flexibilité. N’importe quel conteneur peut être désigné comme disposition Flex.

Quels sont les avantages de la mise en page flexible HTML5 ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

La mise en page flexible (Flexible Box ou flexbox) est une méthode de mise en page qui garantit que les éléments ont un comportement approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils.

Le but de l'introduction du modèle de disposition flexbox est de fournir un moyen plus efficace d'organiser, d'aligner et d'attribuer un espace vide aux sous-éléments d'un conteneur.

Avantages et inconvénients de la mise en page flexible :

L'avantage est qu'il est facile à utiliser et qu'il est facile d'obtenir un certain effet de mise en page selon les règles de flexibilité.

L'inconvénient est le suivant : la compatibilité du navigateur est relativement mauvaise et ne peut être compatible qu'avec ie9 et supérieur.

[Tutoriel recommandé : Tutoriel vidéo CSS]

Contenu de la boîte flexible

Boîte flexible par Il est composé d'un conteneur Flex et d'un article Flex.

Un conteneur flexible est défini comme un conteneur flexible en définissant la valeur de la propriété display sur flex ou inline-flex.

Un conteneur flex contient un ou plusieurs éléments enfants flex.

Remarque : L'extérieur du conteneur flexible et l'intérieur du sous-élément flexible sont rendus normalement. La zone flex définit uniquement la façon dont les éléments enfants flex sont disposés dans le conteneur flex.

Les éléments enfants flexibles sont généralement affichés dans une rangée dans la flexbox. Par défaut, il n'y a qu'une seule ligne par conteneur.

Les éléments suivants montrent les sous-éléments flexibles affichés dans une rangée, de gauche à droite :

<!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>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Copier après la connexion

Quels sont les avantages de la mise en page flexible HTML5 ?

Attributs communs de la boîte flexible

属性	描述
flex-direction	指定弹性容器中子元素排列方式
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 的简写
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式