CSS3 Box Flexible

CSS3 Box flexible est un nouveau mode de mise en page.

Le but de l'introduction du modèle de la poche souple de mise en page est de fournir un moyen plus efficace de disposer d'un sous-éléments, l'alignement du récipient et la distribution de l'espace vide.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après le navigateur du numéro ou un préfixe -moz- spécifié.

CSS3 Box Flexible contenu

boîte flexible en un récipient élastique (conteneur Flex) et les sous-éléments élastiques (Flex item) Composants.

récipient élastique en définissant la propriété d'affichage est flex ou inline-flex sera défini comme le récipient élastique.

Le récipient élastique contient un ou plusieurs éléments élastiques sous-.

Remarque: le conteneur externe élastique et l'élément élastique est un enfant de rendu normal. boîte flexible ne définit que la résilience des éléments de l'enfant dans la mise en page du récipient élastique.

sous-élément flexible est généralement affiché dans la zone de ligne élastique. Par défaut, chaque conteneur est une seule ligne.

Ce qui suit montre l'élément élastique des éléments enfants sont affichés sur une seule ligne, de gauche à droite:

Bien sûr, nous pouvons modifier l'arrangement.

Si nous avons mis la direction des biens à rtl ( de droite à gauche), la disposition des sous-éléments élastiques va changer, le changement des mises en page ont également suivi:

flex-direction

flex-direction ordre spécifie le sous-élément élastique dans le conteneur parent.

grammaire

flex-direction: row | row-reverse | column | column-reverse

flex-direction des valeurs sont les suivantes :

• rangée: latéralement de gauche à droite (à gauche), l'agencement par défaut.
• rangée arrière: arrière latéralement aligné (justifié à droite, en avant de la rangée arrière, la dernière au sommet.
• colonne: disposition verticale.
• colonne inverse: inverser la disposition verticale, à partir de la rangée arrière vers l'avant, et enfin une ligne au sommet.

L'exemple suivant illustre la row-reverse utilisation:

L'exemple suivant illustre la column utilisée:

Les exemples suivants illustrent la column-reverse utilisez:

attribut justify-contenu

l'alignement du contenu (justifier la teneur) sur les propriétés élastiques du récipient d'application, les éléments élastiques de conteneurs élastiques alignés le long de l'axe principal (axe principal).

syntaxe justifier contenu est le suivant:

justify-content: flex-start | flex-end | center | space-between | space-around

Chaque analyse de la valeur:

• flex-start:
  

  projet flexible à la première ligne à côté de la garniture. Ceci est la valeur par défaut. La première principale de démarrage à partir des bords extérieurs de l'élément élastique est placé dans les bords principaux de démarrage de la ligne, et la chasse subséquente à son tour placé un terme élastique.

• flex-end:
  

  projet flexible à la fin de la ligne à côté de la garniture. Les premiers éléments principaux de fin de l'extérieur des fils élastiques sont placés dans des bords principaux de fin de la ligne, et la chasse subséquente à son tour placé un terme élastique.

• centre:
  

  projet flexible centré à côté de combler. (Si l'espace libre restant est négatif, le projet permettra également de déborder l'élasticité dans les deux sens).

• l'espace entre:
  

  projet flexible réparti uniformément sur la ligne. Si l'espace est négatif ou seulement un terme élastique, la valeur équivalente à la flex-start. Sinon, principale commencer par les bords extérieurs de la première rangée et un alignement de l'élément élastique, tandis que la ligne principale-end et de la marge entre dans la dernière un alignement terme élastique et la distribution des éléments restants sur la ligne élastique, adjacente également des éléments espacés.

• -Espace autour de :
  

  projet flexible réparti uniformément sur la ligne, des deux côtés de la moitié gauche de l'espace. Si l'espace est négatif ou seulement un terme élastique dont la valeur est équivalente au centre. Dans le cas contraire, l'élasticité du projet, le long de la ligne de distribution et également espacés les uns des autres (par exemple, est 20px), tout en laissant la moitié de l'intervalle (1/2 * 20px = 10px) entre la tête et la queue des deux côtés et le récipient élastique.

Rendus montrent:

L'exemple suivant illustre le flex-end utilisation:

L'exemple suivant illustre le center de l' utilisation de ':

Les exemples suivants illustrent l' space-between l'utilisation de:

Les exemples suivants illustrent l' space-around de l' space-around utiliser:

align-objets propriété

align-items fixés ou récupérer l'élément élastique sur le côté de l'axe de boîte (axe vertical) dans la direction de l' alignement.

grammaire

align-items: flex-start | flex-end | center | baseline | stretch

Chaque analyse de la valeur:

• flex départ: le côté limite de l'élément de boîtier de l'axe élastique (axe vertical) par rapport à la position initiale de l'axe du côté sous tension de la limite de la ligne de départ.
• flex-end: côté limite élastique de l'axe de l'élément de boîte (axe vertical) contre la position de départ pour vivre bout d'arbre côté de la frontière de la ligne.
• centre: la boîte d'élément élastique placé au milieu de l'axe côté ligne (axe vertical) sur. (Si la taille est plus petite que la taille de la ligne élastique de l'élément de boîtier, il est de la même longueur dans les deux directions de débordement).
• référence: éléments de la boîte, tels que l'arbre intérieur élastique et ligne d'arbre secondaire est le même, la valeur de l'équivalent «flex-start '. Dans d'autres cas, la valeur sera impliqué dans l'alignement de référence.
• étirer: Si la taille de l'attribut de boîte de marge spécifie la taille du côté de l'arbre est 'auto', sa valeur sera à proximité des postes comme la taille, mais suivra la propriété 'min / max-width / height' restrictions.

L'exemple suivant montre stretch(默认值) l'utilisation de:

L'exemple suivant illustre le flex-start utilisation:

L'exemple suivant illustre le flex-end utilisation:

L'exemple suivant illustre le center de l' utilisation de ':

L'exemple suivant illustre la baseline de baseline d' utilisation:

propriété flex-wrap

attributflex-wrap est utilisé pour spécifier un mode élément de bandage élastique boîte de l' enfant.

grammaire

flex-flow:  || 

Chaque analyse de la valeur:

• nowrap - Par défaut, le conteneur élastique comme une seule ligne.Dans ce cas, l'enfant élastique peut déborder récipient.
• envelopper - conteneur élastique plusieurs lignes.partie de débordement de l'enfant résilient est placé dans ce cas à une nouvelle ligne, saut de ligne interne se produira sous-clé
• enveloppez-reverse - inverser l' ordre d'enveloppement.

L'exemple suivant illustre l' nowrap utilisation:

L'exemple suivant illustre l' wrap d'utilisation:

L'exemple suivant illustre le wrap-reverse utilisation:

attribut alignez-content

align-content attribut est utilisé pour modifier le flex-wrap le comportement de l' attribut. Similaires align-items , mais il est pas défini l'alignement des sous-éléments élastiques, mais définissent l'alignement de chaque rangée.

grammaire

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Chaque analyse de la valeur:

• stretch - par défaut. Chaque ligne sera étirer pour occuper l'espace restant.
• flex-start - rangées de boîtes empilées à la position initiale du récipient élastique.
• flex-end - rangées de boîtes empilées à la position d'extrémité du récipient élastique.
• center - rangées de boîtes empilées à la position médiane du récipient élastique.
• space-between - chaque ligne du conteneur de poche souple uniformément répartie.
• space-around - chaque ligne dans le conteneur de poche souple répartie également entre les deux extrémités pour retenir la moitié des sous-éléments et sous-éléments d' espacement taille.

L'exemple suivant illustre le center de l' utilisation de ':

attributs de sous-éléments flexibles

séquence

grammaire

order: 

Chaque analyse de la valeur:

• <Entier>: une valeur entière utilisée pour définir l'ordre dans lequel la faible valeur de la surface supérieure. Il peut être négatif.

order pour définir les propriétés dans les propriétés élastiques des éléments élastiques contenant de l' enfant:

aligner

La valeur des paramètres "marge" est "auto", obtenir automatiquement le récipient élastique dans l'espace restant. Donc, définir la valeur de la marge verticale de "auto", il permet aux sous-éléments élastiques sont complètement concentrés sur la direction à deux axes du récipient élastique.

Les exemples suivants sont sur le premier élément de sous-élastique fixé margin-right: auto; . L'espace restant sera placé dans les bons éléments:

centre parfait

Les exemples suivants seront la solution idéale aux problèmes que nous rencontrons habituellement le centre.

boîte élastique, centre devient très simple, je veux juste régler la margin: auto; peut rendre les sous-éléments élastiques dans le sens axial sur deux parfaitement centrée:

alignez-auto

align-self attribut est utilisé pour définir la direction de l' alignement de l'élément élastique sur le même côté de l'axe (axe vertical).

grammaire

align-self: auto | flex-start | flex-end | center | baseline | stretch

Chaque analyse de la valeur:

• auto: Si la valeur 'auto' 'align-soi », la valeur calculée de l'élément parent de l'élément' align-éléments de la valeur, si elle n'a pas de parent, la valeur calculée de la 'stretch'.
• flex départ: le côté limite de l'élément de boîtier de l'axe élastique (axe vertical) par rapport à la position initiale de l'axe du côté sous tension de la limite de la ligne de départ.
• flex-end: côté limite élastique de l'axe de l'élément de boîte (axe vertical) contre la position de départ pour vivre bout d'arbre côté de la frontière de la ligne.
• centre: la boîte d'élément élastique placé au milieu de l'axe côté ligne (axe vertical) sur. (Si la taille est plus petite que la taille de la ligne élastique de l'élément de boîtier, il est de la même longueur dans les deux directions de débordement).
• référence: éléments de la boîte, tels que l'arbre intérieur élastique et ligne d'arbre secondaire est le même, la valeur de l'équivalent «flex-start '. Dans d'autres cas, la valeur sera impliqué dans l'alignement de référence.
• étirer: Si la taille de l'attribut de boîte de marge spécifie la taille du côté de l'arbre est 'auto', sa valeur sera à proximité des postes comme la taille, mais suivra la propriété 'min / max-width / height' restrictions.

L'exemple suivant illustre les sous-éléments élastiques aligner-auto effet de l'application des valeurs différentes:

fléchir

flex attribut est utilisé pour spécifier comment allouer de l' espace pour les sous-éléments élastiques.

grammaire

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

Chaque analyse de la valeur:

• none: aucun calcul mot-clé est: 0 0 auto
• [Flex-grandir]: définition du taux d'expansion de boîte d'élément élastique.
• [Flex-shrink]: définition du taux de retrait de boîte d'élément élastique.
• [Flex-base]: La valeur de référence par défaut définit l'élément élastique de la boîte.

L'exemple suivant, un premier élément sous-élastique occupe 2/4 de l'espace, les deux autres chaque 1/4 Espace:

D'autres exemples

Créer une page en réponse à l' aide d' une boîte élastique

CSS3 Flexible Box Properties

Le tableau ci-dessous utilisés couramment à la case dans les propriétés élastiques: