Maison > Article > interface Web > Comment disposer une flexbox ? Tutoriel détaillé

Comment disposer une flexbox ? Tutoriel détaillé

云罗郡主avant: 2018-10-23 15:23:062812parcourir

Le contenu de cet article porte sur la manière de disposer la boîte flexible flexbox ? Le didacticiel détaillé a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans le modèle de boîte flexible CSS3, nous pouvons utiliser l'attribut box-flex pour définir si les éléments enfants à l'intérieur de la boîte flexible ont un espace flexible. Si l'élément enfant dispose d'un espace flexible, lorsque la taille de la boîte flexible (élément parent) est agrandie ou réduite, la taille de l'élément enfant avec un espace flexible sera également agrandie ou réduite. Chaque fois que la flexbox dispose d'un espace supplémentaire, l'élément enfant avec le flexspace augmentera également sa taille pour remplir cet espace.

Remarque :

La valeur de l'attribut box-flex est un entier ou un nombre décimal, elle ne peut pas être un nombre négatif et la valeur par défaut est 0.

Lorsque la boîte contient plusieurs éléments enfants avec l'attribut box-flex défini, le navigateur ajoutera les valeurs d'attribut box-flex de ces éléments enfants, puis utilisera leurs valeurs respectives pour tenir compte pour la valeur totale. Utilisez des colonnes pour allouer l’espace restant dans la boîte.

Notez que l'attribut box-flex n'est efficace que lorsque la largeur ou la hauteur de la boîte flexible est déterminée. Autrement dit, la valeur de l'attribut width ou height doit d'abord être définie pour l'élément parent.

Utilisez des paramètres d'espace flexibles afin que la largeur et la hauteur totales des éléments à l'intérieur de la boîte flexible soient toujours égales à la largeur et à la hauteur de la boîte flexible. Cependant, l'espace flexible de l'élément enfant ne prend effet que lorsque la boîte flexible a une certaine largeur ou hauteur.

Exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-flex属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
            width:200px;
            height:150px;
        }
        #box1
        {
            background:red;
            -webkit-box-flex:1.0;
        }
        #box2
        {
            background:blue;
            -webkit-box-flex:2.0;
        }
        #box3
        {
            background:orange;
            -webkit-box-flex:1.0;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

L'effet d'aperçu dans le navigateur est le suivant :

Comment disposer une flexbox ? Tutoriel détaillé

Analyse :

Utilisez " ici box-orient:horizontal;" définit la disposition horizontale des sous-éléments à l'intérieur de la boîte flexible et spécifie une largeur de 200 px pour la boîte flexible. Après cela, il nous suffit d'utiliser l'attribut box-flex pour spécifier une valeur pour chaque élément enfant, et le navigateur calculera automatiquement la proportion de chaque élément enfant et divisera automatiquement la largeur.

Ce qui précède est comment disposer la boîte flexible flexbox ? Introduction complète aux didacticiels détaillés Si vous souhaitez en savoir plus sur les Tutoriels vidéo CSS3, veuillez faire attention au site Web PHP chinois.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser le CSS pour obtenir un effet circulaire ? (exemple de code)Article suivant：Comment utiliser le CSS pour obtenir un effet circulaire ? (exemple de code)

Articles Liés

Voir plus