Introduction détaillée à la mise en page flexible (mise en page Flex)

1. Mise en page flexible

Dans la vie quotidienne, nous utilisons couramment les types de mise en page suivants :

1. Flottant + Positionnement

2. Adaptatif (pourcentage)

3. Mise en page réactive

4. Mise en page flexible (Flex layout)

Ce qu'il faut régler aujourd'hui C'est une mise en page flexible plus couramment utilisée, mais il existe une différence entre les balises de bloc et les balises de bloc en ligne.

{:;
}
input{
　　:;
}

Bien sûr, tout ne peut pas plaire à tout le monde comme l'argent, il a aussi ses propres avantages et inconvénients.

Avantages : la compatibilité prend en charge tous les navigateurs (les navigateurs basés sur Webkit doivent ajouter -webkit-), peut être ajustée en fonction des préférences de l'utilisateur et n'importe quel conteneur peut être désigné comme mise en page Flex.

Inconvénients : étant donné que la mise en page flexible est réglable, les possibilités sont énormes et l'ajustement prend beaucoup de temps ; certaines conceptions flexibles doivent être conçues séparément pour IE6, mais... combien de personnes l'utilisent encore ; IE6 ( ⊙﹏⊙)b.

　Remarque : lorsque nous utilisons une mise en page flexible, float, clear et vertical-align en CSS ne seront pas valides.

2. Attributs de mise en page flexible

　Tout d'abord, c'est l'attribut du conteneur de mise en page flexible. 　

　1.attribut flex-direction

　flex-direction détermine la direction du conteneur.

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

Les quatre valeurs sont : ligne (valeur par défaut) de gauche à droite, ligne inversée de droite à gauche, colonne de haut en bas, colonne inversée de bas Vers le haut.

　Attribut 2.flex-wrap

La mise en page par défaut est généralement dans le même rangée, lorsque l'attribut flex-wrap est défini, le contenu qui ne peut pas être organisé sera automatiquement enveloppé.

div{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Les quatre valeurs sont : nowrap (valeur par défaut) pas de retour à la ligne, wrap down down, wrap-reverse up up.

　3.attribut flex-flow

　L'attribut flex-flow est celui ci-dessus deux L'abréviation de l'attribut, la valeur par défaut est row nowrap。

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

　4.justify-content attribut

L'attribut justification-content définit l'alignement dans la direction du conteneur.

div {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　flex-start(Valeur par défaut) : Aligner à gauche.

　　flex-end : Aligner à droite.

　　center : Aligné au centre.

　　space-between : Alignez les deux extrémités, chaque sous-élément est également espacé et il n'y a pas de séparation entre le sous-élément et la bordure du conteneur.

　space-around : L'espacement des deux côtés de chaque élément enfant est égal. L'espacement entre les éléments enfants est deux fois plus grand que l'espacement entre les éléments enfants et la bordure du conteneur.

　5.attribut align-items

L'attribut align-items est défini dans le conteneur vertical Alignement dans la direction.

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

　flex-start : Alignez le point de départ dans le sens vertical.

　　flex-end : Alignement vertical des points finaux.

　　center : alignement vertical du point médian.

　　baseline : Aligné sur la ligne de base du texte dans le premier élément enfant.

　stretch(Valeur par défaut) : Si l'élément enfant n'a pas de hauteur définie ou si la hauteur est définie sur auto, alors il occupera toute la hauteur du conteneur.

　Attribut 6.align-content

L'attribut align-content définit l'enfant éléments Alignement dans les deux sens.

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

　　flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐。

　　flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐。

　　center：当容器方向子元素刚好填满时，与垂直方向的中点对齐。

　　space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等距离间隔。

　　space-around：两个方向两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：占满整个垂直方向。

　　下面就是具有弹性布局容器中子元素的属性

　　1.order属性

　　order属性定义了子元素的排列顺序，数值小的在前。

.son {
  order: <integer>;
}

　　2.flex-grow属性

　　flex-grow属性定义了子元素的放大比例，默认值为0。

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

　　当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍。

　　3.flex-shrink属性

　　flex-shrink属性定义了子元素的缩小比例，默认值为1。

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

　　给所有子元素设置该属性为1，当空间不足时那么所有子元素将等比例缩小平分所有空间，如果单独给某一个子元素设置0，那么该子元素将在空间不足时不缩小。

　　4.flex-basis属性

　　该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

　　5.flex属性

　　该属性为flex-grow, flex-shrink 和 flex-basis的简写。

　　6.align-self属性

　　该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性。

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

Auto : valeur par défaut, indiquant que l'attribut align-items du parent est hérité par défaut.

　　flex-start : Point de départ aligné verticalement.

　　flex-end : Alignement vertical des points finaux.

　　center : alignement vertical du point médian.

　　baseline : Aligné sur la ligne de base du texte dans le premier élément enfant.

　stretch(Valeur par défaut) : Si l'élément enfant n'a pas de hauteur définie ou si la hauteur est définie sur auto, alors il occupera toute la hauteur du conteneur.

flex layout (disposition élastique)

1. Les propriétés du conteneur sont : flex-direction : (détermine la direction de l'axe principal) (c'est-à-dire la direction de la disposition des éléments) valeur :row/row-reverse/column/column-reverse/ flex-wrap : (Comment retourner à la ligne si un axe ne peut pas être disposé) Valeur : nowrap (par défaut) : pas de retour à la ligne. wrap : Wrap, avec la première ligne en haut. wrap-reverse : wrap, première ligne ci-dessous. flex-flow : (La propriété flex-flow est l'abréviation de la propriété flex-direction et de la propriété flex-wrap. La valeur par défaut est row nowrap) justifier-content : (La propriété justifier-content définit l'alignement de l'élément sur l'axe principal.) Prendre des valeurs : flex-start (par défaut) : aligné à gauche flex-end : aligné à droite au centre : espace entre les deux centré : aligné aux 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. align-items (comment aligner sur l'axe transversal) Valeur : flex-start/flex-end/center/baseline/stretch align-content (définit l'alignement de plusieurs axes. Si l'élément n'a qu'un seul axe, cet attribut n'en a pas effet Fonction) Valeur : flex-start : Aligner avec le point de départ de l'axe transversal. flex-end : aligné avec le point final de l'axe transversal. centre : aligné avec le milieu de l’axe transversal. espace entre : Alignez avec les deux extrémités de l’axe transversal et les intervalles entre les axes sont uniformément répartis. espace autour : 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. stretch (par défaut) : L'axe occupe tout l'axe transversal.                                                                                                                                                                  . Plus la valeur est petite, plus l'arrangement est avancé. La valeur par défaut est 0. L'attribut flex-grow définit le taux d'agrandissement de l'élément. La valeur par défaut est 0, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi. L'attribut flex-shrink définit le taux de réduction 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. L'espace de l'axe principal occupé par les éléments à base flexible (taille principale). Le navigateur utilise cet attribut pour calculer s'il y a de l'espace supplémentaire sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille d'origine du projet. flex align-self permet à un seul élément d'être aligné différemment des autres éléments, remplaçant ainsi la propriété align-items. La valeur par défaut est auto, ce qui signifie hériter de l'attribut align-items de l'élément parent, s'il n'y a pas d'élément parent, cela équivaut à 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!