Résumé de la mise en page flexible CSS3

Résumé de la mise en page flexible CSS3

En 2009, le W3C a proposé une nouvelle solution - La mise en page flexible, qui peut être simple et complète, implémenter divers mises en page de manière réactive. Actuellement, il est pris en charge par tous les navigateurs.

Flex est l'abréviation de Flexible Box, qui signifie « disposition flexible » et est utilisée pour offrir une flexibilité maximale pour les modèles en forme de boîte. N’importe quel conteneur peut être désigné comme une mise en page Flex.

(Apprentissage recommandé : Tutoriel CSS )

Les éléments en ligne peuvent également utiliser la mise en page Flex.

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

Il est à noter que les navigateurs dotés du noyau Webkit doivent ajouter le préfixe -webkit.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

De plus, après avoir défini la disposition Flex, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.

6 propriétés couramment utilisées dans la mise en page flexible

• flex-direction
• flex-wrap
• flex-flow
< La propriété 🎜>justify-content
align-items
align-content

1、flex-direction détermine la direction de l'axe principal ( C'est-à-dire la direction dans laquelle les éléments sont disposés).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

ligne (valeur par défaut) : L'axe principal est horizontal et le point de départ est à l'extrémité gauche.
row-reverse : L'axe principal est horizontal et le point de départ est à l'extrémité droite.
colonne : L'axe principal est vertical et le point de départ est sur le bord supérieur.
colonne inversée : L'axe principal est vertical et le point de départ est au bord inférieur.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (par défaut) : aucun saut de ligne.
• wrap : Saut de ligne, avec la première ligne en haut.
• wrap-reverse : Saut de ligne, la première ligne est en dessous.

3. L'attribut <code>3、<strong>flex-flow</strong>flex-flowflex-direction est l'abréviation de l'attribut flex-wrap et de l'attribut row nowrap, et la valeur par défaut est

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

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

5、<strong>align-items</strong>

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

(valeur par défaut) : Si l'élément ne définit pas de hauteur ou est défini sur automatique, il occupera toute la hauteur du conteneur. 6、<strong>align-content</strong>

6. L'attribut </p>align-content<ul> définit l'alignement de plusieurs axes. Cette propriété n'a aucun effet si le projet ne comporte qu'un seul axe.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• order Il y a également les 6 propriétés suivantes définies sur le projet.
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

flex-grow L'attribut order définit l'ordre dans lequel les éléments sont triés. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0. L'attribut 0

.item {
  order: <integer>;
}

flex-grow définit le taux de grossissement de l'élément. La valeur par défaut est flex-grow, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi.

.item {
  flex-grow: <number>; /* default 0 */}

Si tous les éléments ont un attribut flex-shrink de 1, ils diviseront également l'espace restant (le cas échéant). Si l'attribut

flex-shrinkflex-shrink définit le taux de rétrécissement de l'élément. La valeur par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'élément rétrécira.

.item {
  flex-shrink: <number>; /* default 1 */}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */}

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

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!