Partagez une aide-mémoire d'écriture standard FlexBox et compatible-tutoriel CSS-php.cn

Partagez une aide-mémoire d'écriture standard FlexBox et compatible

高洛峰

Libérer： 2017-03-16 11:02:32

original

1243 Les gens l'ont consulté

Écriture standard FlexBox :

Navigateurs pris en charge : IE11, Chrome29, FireFox 20, Safari plus préfixe -webkit-

Aperçu :

Au total, il y a 12 attributs;

Il y a 6 ou 5 attributs uniques sur le conteneur, qui définissent respectivement la direction de disposition des éléments, la rangée, la disposition horizontale, la disposition verticale, la distribution des blancs, et un attribut abrégé, direction, la ligne

a 6, 5 attributs uniques sur les éléments du conteneur, définissant respectivement l'ordre , l'expansion, la contraction, la taille initiale, l'alignement, et une description d'attribut abrégé taille de l'élément

flex-basis : flex :

conteneur : affichage: flex | inline-flex;

Description

flex-direction : ligne colonne | 🎜>

Le sens de disposition des éléments dans le conteneur

flex -wrap: nowrap | wrap-reverse

L'élément est affiché sur une ou plusieurs lignes

flex-flow : par défaut :

Abréviation des deux propriétés ci-dessus

justesiy-content: flex-start | flex-end | centre | espace-entre | espace-autour

Répartition horizontale des éléments à l'intérieur du conteneur

align-items: étirement | flex-end centre |

Dans le sens vertical, La répartition des éléments au sein du conteneur

align-content: étirement | flex-end centre | >

Répartition de l'espace blanc supplémentaire à l'intérieur du conteneur

Articles du conteneur :

commander : 0

L'ordre de disposition des éléments dans le conteneur

alignement-auto : auto | flex-fin centre | étirement de base

Remplacez la valeur de align-items et définissez sa propre distribution dans la direction verticale

flex -grow : 0

L'expansion de l'espace occupé par l'élément dans le conteneur

flex-rétrécissement : Le retrait de l'espace occupé par l'élément dans le conteneur

auto

Une fois initialisé, la taille de l'élément dans le conteneur

; <0 1 auto>

Abréviations pour les trois attributs ci-dessus

* Le ci-dessus ne prend pas en charge les valeurs négatives ;

*La première valeur de chaque attribut est la valeur par défaut ;

*Le bleu est le mode d'abréviation à attributs multiples

Compatible avec IE10 : ajouter un préfixe ; -ms-

flex-directionflex-wrap flex -flowjustifier-contenu-ms-flex-line-pack

affichage :-ms-flexbox \| -ms-inline-flexbox;	standard (Orange est l'attribut de l'article)
-ms-flex-direction : ligne \| colonne-inverse \| >
-ms-flex-wrap : aucun wrap \| wrap-reverse
Non pris en charge
-ms-flex-pack : début \| fin \|centre \| justifier
-ms-flex-align : étirement début fin \|centre \| 🎜> aligner-item	s
: début \|centre \|ligne de base	align-content
-ms-flex-order :	commander
-ms-flex-item-align : étirer \| démarrer \| fin \|centre \| ligne de base	s'aligner soi-même
- ms-flex : \|\| aucun	flex : 0 0 auto

* Il n'est pas recommandé de l'utiliser avant IE10. Vous pouvez essayer display:table;

<.>À propos de Chrome, l'ancienne version de FireFox prend en charge :

FireFox : remplacez

-webkit- par -moz- pour obtenir

conteneur : affichage : -webkit-flexbox \| -webkit-inline-flexbox;	standard (Orange est l'attribut de l'article)
-webkit -box-direction : normal \| inverse -webkit-box-orient : horizontal \| vertical	flex-direction
Non pris en charge	flex-flow
-webkit -box-pack :
ne prend pas en charge	align-content
-webkit-box-align:
-webkit-box-ordinal-group :
	: 1	flex-grow
-webkit-flex-shrink : 0	flex-rétrécissement
-webkit-flex-basis : auto (无-moz-)	flex-basis
-webkit-box: <1 0 auto>	flex
不支持	s'aligner soi-même

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!