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.

2. Définition de l'attribut <p>flex-wrap<code>2、<strong>flex-wrap</strong>, si une ligne d'axe ne peut pas être disposée, comment envelopper la ligne.

.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

. L'attribut

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

4、<strong>justify-content</strong>4, </p>justify-content<ul> définit l'alignement de l'élément sur l'axe principal.

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

flex-start (par défaut) : aligné à gauche

flex-end : aligné à droite

centre : centré

espace- between : Alignez les deux extrémités, avec un espacement égal entre les éléments.

espace autour : chaque élément est également espacé des deux côtés. Par conséquent, l’espace entre les éléments est deux fois plus grand que l’espace entre les éléments et la bordure. L'attribut

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

5. <ul>align-items<li> définit la manière dont les éléments sont alignés sur l'axe transversal. flex-start

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

flex-end : Le point de départ de l'axe transversal est aligné.

center : Le point final de l'axe transversal est aligné.

baseline : Alignez le milieu de l'axe transversal.

stretch : L'alignement de base de la première ligne de texte de l'élément.

(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;
}

flex-startCet attribut peut prendre 6 valeurs.

flex-end

 : Aligné avec le point de départ de l'axe transversal.

center

 : Aligné avec le point final de l'axe transversal.

space-between

 : Aligné au milieu de l'axe transversal.

space-around

 : Alignez avec les deux extrémités de l'axe transversal et les intervalles entre les axes sont uniformément répartis.

stretch

 : Chaque axe est également espacé des deux côtés. Par conséquent, la distance entre les axes est deux fois plus grande que la distance entre les axes et le cadre.

(valeur par défaut) : L'axe occupe tout l'axe transversal.

• 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

d'un élément est 2 et que les autres éléments sont tous 1, le premier occupera deux fois plus d'espace restant que les autres éléments. 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 */}

<🎜>Si l'attribut <🎜> de tous les éléments est 1, lorsqu'il n'y a pas suffisamment d'espace, ils seront tous réduits proportionnellement. Si l'attribut <🎜> d'un élément est 0 et que tous les autres éléments sont 1, le premier ne rétrécira pas lorsque l'espace est insuffisant. <🎜>

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!