Comment utiliser CSS3 pour implémenter une disposition de boîte flexible-tutoriel CSS-php.cn

Comment utiliser CSS3 pour implémenter une disposition de boîte flexible

坏嘻嘻

Libérer： 2018-09-26 11:50:36

original

4758 Les gens l'ont consulté

Le schéma de mise en page traditionnel est basé sur le modèle de boîte de flotteur, d'affichage et de position. Avec l'amélioration des langages de développement, le modèle de mise en page de boîte flexible est devenu un bon outil dans la boîte à outils du développeur Web car il abandonne la complexité du modèle traditionnel. Le paramètre peut parfaitement répondre aux exigences du développeur en matière de compatibilité des pages, c'est-à-dire qu'il peut toujours garantir que les éléments ont un comportement approprié lorsque la page doit s'adapter à différentes tailles d'écran et types d'appareils. Cet article vous apporte du contenu sur la façon d'utiliser rapidement la disposition des boîtes flexibles. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Compréhension de la boîte flexible

La boîte flexible est composée d'un conteneur Flex et d'un article Flex, et un conteneur flexible peut être défini comme un conteneur flexible en définissant la valeur de l'attribut display sur flex ou inline-flex, où le conteneur flexible peut contenir un ou plusieurs sous-éléments flexibles.

Le modèle de boîte traditionnel est très gênant pour la mise en page de ces pages spéciales, comme le centrage vertical et la mise en œuvre du tri des sous-éléments est très gênante. Cependant, avec l'introduction de la mise en page flexible par le w3c, diverses mises en page peuvent être implémentées de manière simple, complète et réactive, ce qui simplifie grandement le processus de développement, et la mise en page flexible a été prise en charge par tous les navigateurs.

Cours connexes recommandés : Recommandation du didacticiel vidéo sur la mise en page flexible : 2018, les 5 derniers didacticiels vidéo sur la mise en page élastique flexible

Exemple flexible de boîte

Exemple 1 : Modèle traditionnel

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            height: 150px;
            background-color: darkcyan;
                     }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
                 }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

Copier après la connexion

La structure est représentée sur la figure

Comment utiliser CSS3 pour implémenter une disposition de boîte flexible

Exemple 2 : Tri des sous-éléments

<style> 
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            background-color: darkcyan;
            flex-direction: row-reverse;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

Copier après la connexion

La structure est telle que représentée sur la figure

Comment utiliser CSS3 pour implémenter une disposition de boîte flexible

Exemple 3 : La case est affichée au centre

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            background-color: darkcyan;
            justify-content: center;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

Copier après la connexion

La structure est comme indiqué sur la figure

Comment utiliser CSS3 pour implémenter une disposition de boîte flexible

Exemple 4 : Afficher la structure

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            height: 211px;
            background-color: darkcyan;
            align-items: flex-end;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

Copier après la connexion

de la en bas comme indiqué sur la figure

Comment utiliser CSS3 pour implémenter une disposition de boîte flexible