Tutoriel d'introduction complet sur la mise en page flexible

contour

Introduction au CSS
modèle de boîte
qu'est-ce que la flexbox
direction flexible
emballage flexible
flux flexible
justifier-contenu
aligner les éléments
aligner le contenu
commande
croissance flexible
flex-rétrécissement
base flexible
fléchir
s'aligner

Bases de Flexbox + vidéo pratique du projet

Introduction au CSS

Documentation de référence

Que sont les feuilles de style en cascade

CSS est l'abréviation de Feuille de style en cascade. Est un langage de balisage pour un contrôle (amélioré) des styles de pages Web et permet la séparation des informations de style du contenu Web.

syntaxe de style

Selector {
    
    property:value}

Comment ajouter une feuille de style à votre page Web

Vous pouvez ajouter des feuilles de style à vos pages Web des trois manières suivantes. La définition de style la plus proche de la cible a une priorité plus élevée. Un style à priorité élevée héritera des définitions qui ne se chevauchent pas du style à faible priorité mais remplacera les définitions qui se chevauchent.

Styles en ligne

La définition en ligne consiste à utiliser l'attribut de style de l'objet dans le balisage de l'objet pour définir les attributs de feuille de style qui s'y appliquent.

示例代码：

<p style="color:#f00;">这一行的字体颜色将显示为红色</p>

Incorporer un objet Bloc de style

<head></head>Vous pouvez insérer un <style></style>objet bloc dans le balisage de votre document HTML , puis <style></style>insérer le code suivant à l'intérieur.

示例代码：

body {
  background:#fff;
  color:#000;
}
p {
  font-size:14px;
}

Lien vers une feuille de style

Vous pouvez d'abord créer un fichier de feuille de style externe *.css, puis utiliser l'objet lien HTML.

示例代码：

<link rel="stylesheet" href="*.css" />

Disposition flexible

La mise en page Web (layout) est une application clé du CSS.

disposition traditionnelle

La solution traditionnelle de mise en page, basée sur le modèle box, repose sur l'attribut display + l'attribut position + l'attribut float.

Disposition de la boîte flexible

Module CSS Flexible Box Layout, appelé Flexbox Layout, la disposition Flexbox est un nouveau mode de mise en page en CSS3, qui est utilisé pour améliorer l'alignement, la direction, le tri et d'autres défauts des étiquettes dans le mode traditionnel.

La principale caractéristique du conteneur flexible est la possibilité de modifier la largeur ou la hauteur de ses enfants pour remplir au mieux l'espace disponible sur différentes tailles d'écran.

La fonctionnalité la plus importante est que lorsque la vue parent change de taille en raison de différents écrans, la vue parent peut modifier dynamiquement la largeur et la hauteur de la sous-vue pour remplir autant que possible l'espace disponible de la vue parent.

De nombreux concepteurs et développeurs trouvent que la mise en page flexbox est plus facile à utiliser. Le positionnement des éléments peut être réalisé avec moins de code que la mise en page traditionnelle, ce qui simplifie le processus de développement.

Les derniers navigateurs pris en charge par Flexbox

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opéra 17+
Safari 6.1+ (préfixé par -webkit-)
Android 4.4+
iOS 7.1+ (préfixé par -webkit-)

Afficher les fonctionnalités de prise en charge du navigateur .

utilisation de la boîte flexible

Pour utiliser la disposition flexbox, il vous suffit de définir l'attribut display sur la balise parent :

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

Si vous souhaitez que vos éléments enfants utilisent la disposition flexbox, vous pouvez écrire :

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

Note: C'est le seul attribut qui permet au conteneur d'utiliser la disposition flexbox, ce qui permet à toutes les sous-vues de devenir immédiatement des éléments flexibles.

modèle de boîte

Avant de commencer à découvrir les propriétés liées à la flexbox, nous présentons d'abord le modèle flexbox.

Analogie entre classes et objets

Classe : C'est un concept abstrait, tel que les balises div, p, span, inputetc.

Objet : Un objet est une chose spécifique, telle que <div></div>, <p />, <span></span>, <input />etc.

structure du modèle de boîte

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>

        .flexbox-model-container {
            background-color: #FECE3F;
            width: 600px;
            height: 250px;
            display: flex;
        }

        .flexbox-model {
            background-color: green;
            width: 200px;
            height: 50px;
            padding: 50px;
            border: 10px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>

<div class="flexbox-model-container">
    <div class="flexbox-model">
        flexbox-model
    </div>
</div>

</body>
</html>

rendus

calcul de la largeur et de la hauteur

La largeur de la boite = la largeur de la bordure bleue dans le rendu

La hauteur de la boite = la hauteur de la bordure bleue dans le rendu

Diagramme de structure du modèle de boîte standard

La relation entre flex-conteneur et flex-item


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>
        .flex-item {
            width: 120px;
            height: 120px;
            background-color: white;
            margin: 20px;
        }

        .flex-container {
            background-color: #FECE3F;
            width: 600px;
            height: 220px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
</div>

</body>
</html>

Analyse du diagramme d'effet

L'image jaune dans l'image ci-dessous représente les flex-containertrois carrés blancs. C'est flex-itemla vue flex-containerparent , que nous appelons habituellement , et c'est la sous-vue, que nous appelons habituellement. Il peut y en avoir plusieurs , et il n'y en a qu'une seule directe . Il y en a plusieurs. et l'autre ligne est appelée .flex-item容器flex-itemflex-container项目容器项目项目容器容器项目主轴交叉轴

La propriété flexbox du conteneur

direction flexible
emballage flexible
flux flexible
justifier-contenu
aligner les éléments
aligner le contenu

Propriétés de la flexbox de l'élément

commande
croissance flexible
flex-rétrécissement
base flexible
fléchir
s'aligner

direction flexible

La propriété CSS flex-direction spécifie la manière dont les éléments internes sont disposés dans un conteneur flexible, définissant la direction de l'axe principal (positif ou négatif).

Notez que les valeurs row et row-reverse sont affectées par la directionnalité du conteneur flex. Si son attribut dir est ltr, row représente l'axe horizontal orienté de gauche à droite et row-reverse représente de droite à gauche ; si son attribut dir est rtl, row représente l'axe orienté de droite à gauche et row-reverse représente From de gauche à droite.

rangée

L'axe principal du conteneur flexible est défini comme étant le même que la direction du texte. Le début et la fin de la broche sont dans le même sens que le contenu.

Valeur

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

rendus

ligne inversée

Les performances sont les mêmes que celles de la ligne, mais le point de départ et le point final de l'axe principal sont remplacés.

Valeur

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

rendus

colonne

L'axe principal et l'axe du bloc du conteneur flexible sont les mêmes. Le point de départ de la broche est le même que le point final de la broche et les points avant et arrière du mode d'écriture.

Valeur

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

rendus

colonne inversée

Les performances sont les mêmes que celles de la colonne, mais le point de départ et le point final de l'axe principal sont remplacés.

Valeur

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

rendus

Valeur par défaut:row

emballage flexible

Cet attribut est principalement utilisé pour définir si les éléments du conteneur seront enveloppés.

maintenant

Valeur

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

rendus

envelopper

Valeur

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

rendus

wrap-reverse

Valeur

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

rendus

Valeur par défaut:nowrap

flux flexible

flex-flow est une combinaison de flex-direction et flex-wrap.

Valeurs

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

Valeur par défaut:`row nowrap`

justifier-contenu

justify-contentIl est principalement utilisé pour disposer la broche étroitement à l'intérieur flex items.容器

démarrage flexible

Valeur

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

rendus

extrémité flexible

Valeur

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

rendus

centre

Valeur

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

rendus

l'espace entre

Valeur

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

rendus

espace autour

Valeur

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

rendus

Valeur par défaut:flex-start

aligner les éléments

Lorsqu'elle est flex itemsuniquement sur l'axe principal 一排, align-itemsla propriété est principalement utilisée pour définir la disposition 交叉轴sur l' flex itemsaxe.

extensible

Valeur

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

rendus

démarrage flexible

Valeur

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

rendus

extrémité flexible

Valeur

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

rendus

centre

Valeur

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

rendus

ligne de base

Valeur

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

rendus

Valeur par défaut:stretch

aligner le contenu

Sur l'flex items axe principal , les propriétés sont principalement utilisées pour définir la disposition sur l'axe.多排(只有一排时此属性不起作用)align-content交叉轴flex items

extensible

Valeur

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

rendus

démarrage flexible

Valeur

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

rendus

extrémité flexible

Valeur

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

rendus

centre

Valeur

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

rendus

l'espace entre

Valeur

.flex-container {
  -webkit-align-items: space-between; /* Safari */
  align-items: space-between;
}

rendus

espace autour

Valeur

.flex-container {
  -webkit-align-items: space-around; /* Safari */
  align-items: space-around;
}

rendus

Valeur par défaut:stretch

commande

orderUtilisé pour modifier l'ordre de tri 容器par défaut 项目.

Valeur

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order: <integer>;
}

rendus

En modifiant la valeur de flex-item, les éléments flex peuvent être réorganisés en fonction de orderla valeur.

Valeur par défaut:0

croissance flexible

flex-growLa valeur par défaut de la propriété est 0que lorsqu'elle est égale à 0, bien qu'il reste flex-containerbeaucoup d'espace supplémentaire, l'espace actuel flex-itemne s'agrandira pas ou ne se rétrécira pas automatiquement pour remplir flex-containerl'espace supplémentaire.

En fait, nous pouvons le résumer de cette façon, flex-growla valeur de l'attribut détermine la proportion de l'espace restant qu'elle remplit automatiquement par rapport aux autres vues sœurs flex-container.

Valeurs


.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

Quand tous itemont flex-growla même valeur, ils occupent le même espace.

La relation proportionnelle entre les 5 dans la figure ci-dessous flex-itemest :1:3:1:1:1

Valeur par défaut:Default value: 0

flex-rétrécissement

flex-shrinkL'attribut est flex-growle contraire. La valeur par défaut est 0, même si flex-containerl'espace n'est pas suffisant, la réduction n'est pas autorisée. Lorsque flex-shrinkla valeur est un 0nombre non positif, elle indique le rapport de réduction actuel flex-itempar rapport aux autres valeurs .兄弟item

Valeur


.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink: <number>;
}

Supposons qu'à l'exception de la valeur dans la figure ci-dessous , 2qui est la valeur par défaut , toutes les autres le sont , alors lorsqu'il n'y a pas suffisamment d'espace, elle ne deviendra pas plus petite et les autres vues sœurs seront réduites proportionnellement.flex-shrink012

Valeur par défaut:1

base flexible

Spécifiez la taille d'un certain élément sur l'axe principal, ou la relation proportionnelle itementre l'axe principal et la taille.flex-container

Valeur

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

rendus

Valeur par défaut:auto

fléchir

flexEst flex-grow, l'abréviation de flex-shrinket flex-basis, autoéquivalent à 1 1 auto, noneéquivalent à 0 0 auto.

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

Valeur par défaut:0 1 auto

s'aligner

align-selfIl est principalement utilisé lorsque son propre état a été modifié en raison flex-containerdes attributs ci-dessus mais que vous souhaitez que votre propre état soit différent des états des autres vues sœurs. Vous pouvez utiliser votre propre état pour le définir.align-itemsalign-self

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

Valeur par défaut:auto