Le meilleur didacticiel CSS3 Box Flexible en 2024, dans ce didacticiel, vous pouvez apprendre support du navigateur,CSS3 Box Flexible contenu,flex-direction,attribut justify-contenu,align-objets propriété,propriété flex-wrap,attribut alignez-content,attributs de sous-éléments flexibles,D'autres exemples,CSS3 Flexible Box Properties,
CSS3 Box flexible est un nouveau mode de mise en page.
CSS3 Box flexible (Flexible Box ou FlexBox), lorsque la page est nécessaire d'adapter à différentes tailles d'écran et les types de périphériques lorsque les éléments doivent veiller à la mise en page de comportement approprié.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.
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é.
propriété | |||||
---|---|---|---|---|---|
support de base (Single-line FlexBox) | 29,0 21,0 -webkit- | 11.0 | 22,0 18,0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
Multi-line FlexBox | 29,0 21,0 -webkit- | 11.0 | 28,0 | 6.1 -webkit- | 17,0 15,0 -webkit- 12.1 |
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
ordre spécifie le sous-élément élastique dans le conteneur parent.
flex-direction: row | row-reverse | column | column-reverse
flex-direction
des valeurs sont les suivantes :
L'exemple suivant illustre la row-reverse
utilisation:
L'exemple suivant illustre la column
utilisée:
Les exemples suivants illustrent la column-reverse
utilisez:
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:
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.
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.
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).
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.
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-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.
align-items: flex-start | flex-end | center | baseline | stretch
Chaque analyse de la valeur:
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:
attributflex-wrap est utilisé pour spécifier un mode élément de bandage élastique boîte de l' enfant.
flex-flow: ||
Chaque analyse de la valeur:
L'exemple suivant illustre l' nowrap
utilisation:
L'exemple suivant illustre l' wrap
d'utilisation:
L'exemple suivant illustre le wrap-reverse
utilisation:
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.
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 ':
order:
Chaque analyse de la valeur:
order
pour définir les propriétés dans les propriétés élastiques des éléments élastiques contenant de l' enfant:
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:
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:
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).
align-self: auto | flex-start | flex-end | center | baseline | stretch
Chaque analyse de la valeur:
L'exemple suivant illustre les sous-éléments élastiques aligner-auto effet de l'application des valeurs différentes:
flex
attribut est utilisé pour spécifier comment allouer de l' espace pour les sous-éléments élastiques.
flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
Chaque analyse de la valeur:
L'exemple suivant, un premier élément sous-élastique occupe 2/4 de l'espace, les deux autres chaque 1/4 Espace:
Créer une page en réponse à l' aide d' une boîte élastique
Le tableau ci-dessous utilisés couramment à la case dans les propriétés élastiques:
propriété | description |
---|---|
afficher | Indique le code HTML de type boîte d'élément. |
flex-direction | Spécifiez comment organiser les éléments de neutrons récipient élastique |
justify-contenu | Un élément élastique dans la zone de la broche direction d'alignement (horizontal). |
alignez-éléments | Un élément élastique dans l'axe latéral du boîtier (axe vertical), la direction d'alignement. |
flex-wrap | Que ce soit un sous-éléments de la boîte d'emballage élastiques au-delà du conteneur parent. |
alignez-content | Modifier le comportement de la propriété flex-wrap, similaire à aligner-éléments, mais pas définir les sous-éléments sont alignés, mais l'alignement de l'ensemble de la ligne |
flex-débit | flex-direction et flex-wrap sténographie |
ordre | Un élément enfant pour boîte élastique. |
alignez-auto | Utilisez les éléments élastiques de l'enfant. Couvrez le récipient align-éléments matériels. |
fléchir | Comment mettre en place un élément élastique boîte de l'enfant espace alloué. |