Une introduction détaillée au modèle de mise en page flexible de boîte flexible CSS3 de mise en page réactive

La

La mise en page a toujours été au centre de la conception de style d'application Web

Nos méthodes de mise en page traditionnelles sont basées sur l'utilisation du modèle de boîte
La mise en page avec affichage, position et flotteur présente certaines limites
Par exemple, pour implémenter un centrage vertical adaptatif
Avec la popularité de la mise en page réactive, CSS3 a introduit un modèle de mise en page élastique plus flexible

flex disposition élastique

L'utilisation de la disposition flexible peut allouer efficacement l'espace d'un conteneur
Même si la taille de notre élément conteneur change
Les éléments à l'intérieur peuvent ajuster sa taille pour s'adapter à l'espace

Si vous souhaitez transformer un élément en flex box
c'est très simple

.demo { /*块级元素*/
    display: flex;}

.demo { /*行级元素*/
    display: inline-flex;}

Après avoir défini la disposition flex, le float, clear et vertical-align l'attribut sera invalide

---

Un petit exemple

<p class="flex-box">
    <p class="flex-item">1</p>
    <p class="flex-item">2</p>
    <p class="flex-item">3</p></p>

.flex-box {    width: 500px;    height: 100px;    border: 1px solid black;}.flex-item {    width: 100px;    height: 100px;    font-size: 80px;    line-height: 100px;    text-align: center;}.flex-item:nth-child(1) {    background-color: lightseagreen;}.flex-item:nth-child(2) {    background-color: violet;}.flex-item:nth-child(3) {    background-color: cornflowerblue;}

Normalement, les éléments enfants p occupent une ligne complète par défaut, ils ne peuvent donc être disposés que verticalement

---

Maintenant, nous utilisons une disposition flexible

.flex-box {    display: flex; /*增*/
    width: 500px;    height: 100px;    border: 1px solid black;}

Nous avons constaté que l'élément enfant a une disposition des lignes dans l'élément parent
On dirait que l'élément enfant a appliqué floatfloat
Mais cette propriété est loin à partir de cela simple
Maintenant, ce n'est que le début (⊙▽⊙)

Concepts associés

Avant de parler de ces propriétés, examinons d'abord quelques concepts de base
Les éléments avec un ensemble de disposition flexible sont appelés "conteneur flexible", appelés "conteneur"
Ses éléments enfants sont appelés "éléments flexibles", appelés "élément "
Ici, je présente une image (Pardonnez ma photo volée, je suis trop paresseux pour la dessiner moi-même..)

Il y a deux axes de coordonnées verticaux dans le " conteneur"
L'horizontal est appelé axe principal
L'axe vertical est appelé Axe transversal
Les côtés gauche et droit de l'axe principal sont appelés Le point de départ de l'axe principal et Le point final de l'axe principal
Les côtés supérieur et inférieur de l'axe transversal Ils sont appelés point de départ de l'axe transversal et point final de l'axe transversal

"projet" a également deux noms
La largeur et la hauteur de chaque projet sont appelées taille de l'axe principal et Taille de l'axe transversal

Cette fois, nous pouvons comprendre pourquoi les éléments enfants sont disposés en lignes après avoir utilisé une disposition flexible
Les éléments sont disposés le long de l'axe principal dans le conteneur

Propriétés du conteneur

La disposition de la boîte flexible "conteneur" a les propriétés suivantes

• flex-flow :flex-direction, flex-wrap

• justify-content

• align-items

• align-content

flex-direction

Nous pouvons utilisez flex-direction pour spécifier la direction de l'axe principal, modifiant ainsi la direction de la disposition des éléments
Valeur de l'attribut :

• ligne (par défaut)

• ligne-inverse

• colonne

• colonne-inverse

.flex-box {    display: flex;    width: 500px;    height: 100px;    border: 1px solid black;    flex-direction: row-reverse; /*增*/}

Il n'y a pas beaucoup d'explications pour les autres attributs, c'est facile à comprendre

Cette image correspond à colonne-inverse, colonne, ligne , rangée respectivement. -reverse

flex-wrap

Les éléments de notre boîte flexible sont disposés sur un axe par défaut
De cette façon, s'il y a plusieurs éléments, ils le seront compressé "de manière flexible" sur une seule ligne
Par exemple, si j'ajoute plus d'éléments

Je ne change pas la largeur des éléments
Mais parce qu'il y a trop d'éléments dans la flexbox, les éléments sont compressés sur l'axe principal

---

Ajoutez maintenant l'attribut flex-wrap

.flex-box {    ......
    flex-wrap: wrap; /*增*/}

flex -wrap : wrap nous permet de spécifier s'il faut envelopper lorsque le conteneur "ne peut pas rentrer" dans l'élément. Les valeurs de l'attribut
sont les suivantes :

• no-wrap

• wrap

• wrap-reverse

前两个我们都理解了
第三个属性值wrap-reverse
换行的项目会排在上面像这样

flex-flow

flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的
就不多解释了

justify-content

justify-content属性定义了项目在主轴上的对齐方式
属性值如下：

• flex-start：左对齐（默认）

• flex-end：右对齐

• center：居中

• space-between：两端对齐（项目间间隔相同）

• space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）

flex-start ：

flex-end：

center：

space-between：

space-around：

align-items

align-items属性定义项目在交叉轴上如何对齐
属性值如下：

• stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）

• flex-start ：交叉轴起点对齐

• flex-end：交叉轴终点对齐

• center：交叉轴中点对齐

• baseline：项目第一行文字的基线对齐

flex-start：

flex-end：

center：

baseline：

align-content

align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效，一条主轴无效
类似于justify-content属性
属性值如下：

• stretch：轴线占满整个交叉轴（默认值）

• flex-start：与交叉轴的起点对齐

• flex-end：与交叉轴的终点对齐

• center：与交叉轴的中点对齐

• space-between：与交叉轴两端对齐，轴线间间隔相等

• space-around：每根轴线两侧的间隔都相等

flex-start：

flex-end：

center：

space-between：

space-around：

项目属性

弹性盒布局“项目”有如下属性

• order

• flex：flex-grow、flex-shrink、flex-basis

• align-self

order

order允许我们自定义项目的排列顺序
默认为0，属性值是数字，数值越小越靠前
有点类似我们优先队列中的优先级

.flex-item:nth-child(1) {    ......
    order: 99;}.flex-item:nth-child(2) {    ......
    order: -1;}.flex-item:nth-child(3) {    ......
}

flex-grow

flex-grow定义项目的放大比例
默认是0，就是如果没有占满容器整行，也不放大项目，就像上面的图片

.flex-item:nth-child(1) {    ......
    flex-grow: 1; <--
}
.flex-item:nth-child(2) {
    ......
    flex-grow: 2; <--
}
.flex-item:nth-child(3) {
    ......
    flex-grow: 3; <--
}

这就相当于三个项目把剩下的空间“切成”6块
项目一拿走1块，项目二拿走2块，项目三拿走3块

flex-shrink

flex-shrink定义项目的缩小比例
默认是1，就是如果空间不足，该项目将等比缩小
通过这个属性我们可以控制各个项目缩小的比例

.flex-item:nth-child(1) {    ......
    flex-shrink: 1; <--
}
.flex-item:nth-child(2) {
    ......
    flex-shrink: 2; <--
}
.flex-item:nth-child(3) {
    ......
    flex-shrink: 3; <--
}

这样各个项目缩小的比例就是 1:2:3
从而保证所有项目总宽度和容器宽度相等

flex-basis

flex-basis定义在分配多余空间之前，项目占据的主轴空间
默认auto，就是项目本来的宽度
我们可以手动设置长度

.flex-item:nth-child(1) {    ......
    flex-basis: 150px; <--
}
.flex-item:nth-child(2) {
    ......}.flex-item:nth-child(3) {    ......
}

flex

flex是flex-grow、flex-shrink、flex-basis的复合属性
默认值：0 1 auto，后两个属性可选
可以写关键字：auto (1 1 auto) 和 none (0 0 auto)

align-self

align-self属性允许个别项目拥有与众不同的对齐方式
就是会覆盖align-items设置的对齐属性
默认值auto，继承弹性容器的align-items属性值
属性值除了auto外，和align-items一样，就不多解释了

• auto

• stretch

• flex-start

• flex-end

• center

• baseline

.flex-box {    ......
    align-items: center;}.flex-item:nth-child(2) {    ......
    align-self: flex-end;}

---

弹性盒的全部属性就是这些了
其实这些都是最新的语法
在此之前浏览器的实现都不一致，了解一下就好了

• 2009年规范语法：
  display: box

• 2011年非官方规范语法：
  display: flexbox

• 最新版本规范语法：
  display: flex

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!