notes d'utilisation de mise en page élastique flex

(Note pour la recherche de référence)

Affichage: introduction flex

  La propriété doit être mise en page élastique, donc changer la mise en page de l'élasticité croisée verticale de la raison pour laquelle puissant et flexible, car il casse beaucoup d'anciennes règles. Tout élément peut être réglé sur layouts élastiques, mises en page élastiques auront un impact sur ses éléments enfants internes:

1. des éléments de bloc ne sont plus une seule ligne (qui est unidimensionnelle).
2. Si les éléments de bloc ne sont pas explicitement largeur prédéterminée, l'élément parent ne sont pas couverts latéralement.
3. flotteur, clair et bien vertical-align échouera.
4. affichage défini sur l'élément parent: flex, puis l'enfant appartient à la disposition élastique.

1.flex direction: ligne | rangée inverse | colonne | colonne inverse | initial | hériter (direction d'agencement de boîte)

(1) à la ligne: valeur par défaut, la broche est horizontal, la position de départ vers la gauche, de gauche à droite article.
(2) à la ligne-inverse: l'arbre principal est horizontal, dans la position de départ droite, projet de droite à gauche.
(3) colonne: une broche verticale, la position de départ à l'élément de haut affichée verticalement, de haut en bas.
(4) colonne inverse: l'axe est vertical, en commençant à la position inférieure, les projets affichés verticalement, de bas en haut.

code:

		/*flex-direction: row;*/
		#main1{
			width:400px;
			display:flex;
			flex-direction: row;
			background: #ccc;
		}
		#main1 div{
			width:50px;
			height:50px;
		}
		/*flex-direction: row-reverse;*/
		#main2{
			width:400px;
			display:flex;
			flex-direction: row-reverse;
			background: #ccc;
		}

		#main2 div{
			width:50px;
			height:50px;
		}

2.flex-wrap: nowrap | Emballage | wrap-inverse (ligne de division ou de démolition de la colonne)

  C'est, ligne après ligne couvert.

(1) .nowrap: valeur par défaut, les éléments prédéterminés ne sont pas supprimés dans les rangées de conteneurs ou de colonnes d' affichage divisé.
(2) .wrap: rangées de conteneurs de démolition Articles prédéterminées ou des colonnes affichées automatiquement supprimé lorsque cela est nécessaire.
(3) .wrap-inverse: les objets dans le conteneur , une ligne de séparation prédéterminée ou colonne affichée automatiquement supprimés lorsque cela est nécessaire, mais dans l' ordre inverse.

code:

        #main2 {
            width: 200px;
            display:flex;
            flex-wrap: wrap;
            background:#ccc;
        }
        #main2 div {
            width: 50px;
            height: 50px;
            text-align:center;
            line-height:50px;
        }

Supplémentaire: Flex-débit (1,2 liant par écrit)

flex-flow: [direction flex] [flex-wrap];
Cette borne supérieure est écrite 1,2
position de flex-wrap-flex direction ils peuvent être écrites directement à la valeur de l' attribut 1, 2
codes:

		#main {
			width: 200px;
			display:flex;
			flex-flow:row-reverse wrap;
			background:#ccc;
		}
		#main div {
			width: 50px;
			height: 50px;
			text-align:center;
			line-height:50px;
		}

(Et entre le projet et l'espace autour de la direction de l'axe principal (par défaut direction horizontale)) l'espace autour | flex-start | flex-end | center | espace entre: 3.justify contenu

(1) .flex-it start: valeur par défaut, un conteneur d'objet prédéterminé dans la position de départ de la broche.
(2) .flex-end: le projet est situé dans une position prédéterminée du récipient , l'extrémité de broche.
(3) .center: projeter une broche intermédiaire prédéterminée du récipient.
(4) .space entre: les deux extrémités sont alignées dans une broche projets prédéterminés.
(5) .space-around: les côtés du récipient sont conservés éléments prédéterminés également espacés.

code:

		#main1 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:space-between;
		}
		#main1 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

		#main2 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:center;
		}
		#main2 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

4.align-produits étirement | center | start-flex | flex-end | référence (tels que le centre de sorte que tous les blocs de sous-éléments qui centrés verticalement)

(1) .stretch: mise en page par défaut récipient élastique sera étirée pour être compatibles avec les projets de conteneur dans la direction d'axe transversale.
(2) .center: élastiques des éléments de conteneur de mise en page prédéterminé centré dans la direction de l' axe transversal.
(3) .flex-it start: conteneur de présentation élastique prédéterminée dans les projets de position de départ alignement contre-axe.
(4) .flex-end: une mise en page de l' élément d'axe transversale prédéterminée position d'extrémité élastique aligné avec le récipient.
(5) .baseline: élastique des éléments de conteneur de présentation prédéterminé aligné avec la ligne de base de la première ligne de texte.

code:

        #main {
            width: 200px;
            height: 100px;
            background:#ccc;
            display: flex;
            align-items: center;
        }
        #main div {
            width: 70px;
	    	height: 20px;
        }

5.align contenu: étirement | center | flex-start | flex-end | espace entre | espace autour (attribut align contenu ne vise que les lignes multiples de conteneurs flex)

Avec flex-wrap, mieux.

(1) .stretch: valeur par défaut, la ligne prédéterminée est étirée pour tenir compte de la taille de la section de l' axe du récipient, où l'élément est étiré.
(2) .center: ligne de récipient prédéterminé coupant l'axe récipient centré. (3) .flex-it start: une position de départ prédéterminée ligne de récipient coupant l'axe récipient aligné.
(4) .flex-end: la fin d'une ligne coupant l'axe prédéterminé conteneur aligné avec la position du récipient.
(5) .space entre: les lignes de conteneur spécifié de conteneurs axes alignés qui se croisent au niveau des deux extrémités, l'intervalle entre les rangées sont égaux.
(6) .space-around: tous les intervalles égaux prédéterminés sur les deux côtés des rangées de conteneurs. Par conséquent, les bords de l'espacement des rangées de conteneurs à l'espacement entre les lignes doublées.

code:

    #main {
        width: 200px;
        height: 300px;
        background:#ccc;
        display: flex;
        flex-wrap: wrap;
        align-content:space-between; 
    }
    #main div {
        width: 50px;
        height: 20px;
    }

<div id="main">
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>

    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
    
    <div style="background-color:red;">1</div>
    <div style="background-color:coral;">2</div>
    <div style="background-color:yellow;">3</div>
    <div style="background-color:green;">4</div>
</div>

6. align-auto: auto | étirement | center | flex-start | flex-end | référence (un élément interne diffèrent dans l'agencement du côté de l'arbre)

(1) .Auto: valeurs d'attribut par défaut héritées ALIGN-éléments de l' emballage élastique, le récipient n'a pas été fourni si les éléments ALIGN-élastiques, l'étirement de la valeur par défaut.
(2) .stretch: projeter une taille prédéterminée à utiliser le récipient est étiré dans l'arbre transversal.
(3) .center: projet d' un axe prédéterminé coupant la ligne centrée.
(4) .flex-it start: position de début d'un élément prédéterminé de la rangée sont alignées croisant la direction axiale.
(5) .flex-end: projet d' un axe prédéterminé coupant la position d'extrémité de la rangée est aligné.
(6) .baseline: prévoir que le projet est alignée sur la ligne dans la ligne de base.

code:

        #main {
            width: 300px;
            height: 200px;
            background:#ccc;
            display: flex;
            flex-flow: row wrap;
        }
        #main div {
            width: 70px;
            height: 70px;
        }
        #main div:nth-child(2n) {
            align-self: center;
        }

<div id="main">
    <div style="background-color:coral;"></div>
    <div style="background-color:green;"></div>
    <div style="background-color:blue;"></div>
    <div style="background-color:red;"></div>
    <div style="background-color:yellow;"></div>
</div>

Dans la pratique de bloquer un multiple d'éléments 2n.

D'autres 1: différence align-éléments et aligner contenu

  attribut peut aligner-élémentsAppliquer à tous les navires de flexSon rôle consiste à définir l' axe d'alignement flex enfant par défaut à l'intersection de chaque ligne du flex.
  align contenuApplique uniquement à conteneur flexible sur plusieurs lignes(Conteneur enfant à savoir fléchir plus que la seule ligne d'attribut d'effet), son rôle est de fléchir lorsque le conteneur quand il y a un espace supplémentaire dans l'axe croix, la question subsidiaire dans son ensemble (valeur d'attribut: démarrage flex , en bout de câble, temps au centre) sont alignés. Effet de différentes valeurs sont les suivantes

2 supplémentaires: différence align-éléments et align-auto

align-éléments sont utilisés comme conteneur parent (style d'écriture dans la feuille de style contient l'affichage), nous pouvons mettre en place tout l'enfant avec ce style. L'alignement auto pour agir sur conteneur enfant, après réglage, seul cet enfant CCTV peut avoir ce style.

8.order: nombre | initial | inherit (pour définir la part de l'emplacement du conteneur)

(1) .number: La valeur par défaut est 0. dispositions d'ordre du projet flex (qui est, régler la position de chaque couleur).

        #main {
            width:400px;
            height:150px;
            display:flex;
            background:#ccc;
        }
        #main div{
            width:70px;
            height:70px;
        }
        div#coral{order:2;}
        div#lightblue{order:4;}
        div#lightgreen{order:3;}
        div#pink{order:1;}

<div id="main">
    <div style="background-color:coral;" id="coral">1coral</div>
    <div style="background-color:lightblue;" id="lightblue">2lightblue</div>
    <div style="background-color:lightgreen;" id="lightgreen">3lightgreen</div>
    <div style="background-color:pink;" id="pink">4pink</div>
</div>

9.flex-croissance: nombre (amplification et par défaut à 0 n'amplifient pas)

  définition élargie de l'attribut de l'élément flex-grow échelle, la valeur par défaut est 0 dire non amplifié. Si l'espace restant du récipient est pas présent, il ne sera pas en mesure de zoomer

(1) .number: une valeur par défaut est zéro, pour une échelle d'agrandissement prédéterminé du sous-marin, le rapport de contraste et d'autres éléments à déterminer.

code:

        #main {
            width: 350px;
            height: 100px;
            background:#ccc;
            display: flex;
        }

        #main div{flex-basis:50px;}

        #main div:nth-of-type(1) {flex-grow: 1;}
        #main div:nth-of-type(2) {flex-grow: 3;}
        #main div:nth-of-type(3) {flex-grow: 1;}
        #main div:nth-of-type(4) {flex-grow: 1;}
        #main div:nth-of-type(5) {flex-grow: 1;}

10.flex-psy: nombre | initial | inherit (propriété incarne la mise en page élastique côté « Qu », afin que le projet peut réduire la taille)

Cet attribut indique le rapport de réduction du conteneur sur l'élément d'arbre, la valeur par défaut est 1.
Nous devons accorder une attention particulière aux points suivants:

(1) Cette propriété s'applique au projet au- dessus du conteneur.
(2) la taille du récipient sur la broche doit être inférieure à la taille du projet, la réduction possible.
(3) Une valeur de zéro indique projets portion réduite.
(4) doit être appliqué environnement de mise en page élastique, sinon valide.
(5) le numéro: La valeur par défaut est 1, le récipient pour rechercher des éléments ayant un rapport d' autres articles.

code:

        #main {
            width:350px;
            height:100px;
            background:#ccc;
            display:flex;
        }
        #main div {
            flex-shrink:1;
            flex-basis:100px;
        }
        #main div:nth-of-type(2) {flex-shrink:3;}

11 base flex: nombre | auto (pour le projet définir une taille de référence initiale)

  Lorsque la base flex et les attributs de largeur existent, l'attribut est la largeur effective, la largeur de la largeur de l'ensemble de l'élément flexible pour flex-base

(1) Numéro: unité de longueur ou d'un pourcentage, d' une longueur prédéterminée du projet initial flex.
(2) auto: valeur par défaut, une longueur égale à la longueur du projet de flexion lui-même, si la longueur de l'article n'a pas été spécifié, en fonction du contenu de la décision.

Supplémentaires 1: flex = 1

flex: flex-grow [] [flex-psy] [base-flex] | auto | 1
  Cette propriété est un flex-grow, l' écriture composite flex-rétractable et propriété base flex. La valeur d'attribut par défaut est 0 1 auto. Si l'élément est pas un projet Flex, cette propriété ne fonctionne pas. Agissant sur l'enfant.

(1) .Auto: 1 1 auto avec le même.
(2) .NONE: 0 0 auto avec le même.
(3) 1 0 1 La valeur par défaut de l' automobile de la même.

2 supplémentaires: compatibilité flex du courant

Nous nous dirigeons tout droit vers une table ,

nous voyons que, FlexBox déjà compatible avec tous les navigateurs, vous pouvez utiliser FlexBox pour montrer son talent extraordinaire , il!