Flexbox

Mise en page CSS jusqu’à

présent

Elément en
Elément Inline:
Block:
Disposition du texte
Grande disposition
et d'autres élément
dans une page
en ligne dans une
section
Mise en page Flex

Pour obtenir des mises en page plus compliquées, nous

pouvons activer un autre type de mode de rendu de mise
en page CSS: la mise en page Flex.
La mise en page Flex définit un ensemble spécial de
règles pour disposer les éléments en lignes ou en
colonnes.
Mise en page Flex

Mise en page Flex résout différentes sortes de problèmes

Voici quelques exemples de mises en page faciles à créer
avec une mise en page Flex (et vraiment difficiles
autrement):
Flex de base
Les dispositions Flex sont composées de:
- Un conteneur Flex, qui contient un ou plusieurs:
- Item(s) Flex
Vous pouvez appliquer les propriétés CSS sur le
conteneur Flex pour dicter la façon dont les éléments
Flex se comportent.
id=flex-
container

class=
flex-
item
Flex de base

Pour faire d'un élément un conteneur Flex,

changez display :
Conteneur de bloc: display : flex; ou
Conteneur en ligne: display: inline-flex;
(Jusqu'à présent,
cela ressemble
exactement à
display: block)
 Flex de base: justify-content

Vous pouvez contrôler la position horizontale de l'élément dans

la boite avec justify-content sur le conteneur flex:

#flex-container {
display: flex;
justify-content: flex-start;
}
Flex de base: justify-content

Vous pouvez contrôler la position horizontale de l'élément

dans la boite avec justify-content sur le conteneur flex:

#flex-container {
display: flex;
justify-content: flex-end;
}
Flex de base: justify-content

Vous pouvez contrôler la position horizontale de l'élément

dans la boite avec justify-content sur le conteneur flex:

#flex-container {
display: flex;
justify-content: center;
}
Flex de base: align-items
Vous pouvez contrôler la position verticalement de
l'élément dans la boite avec align-items sur le
conteneur flex:

#flex-container {
display: flex;
align-items: flex-start;
}
Flex de base: align-items

Vous pouvez contrôler la position verticalement de l'élément

dans la boite avec align-items sur le conteneur flex:
:
#flex-container {
display: flex;
align-items: flex-end;
}
 Flex de base: align-items

Vous pouvez contrôler la position verticalement de l'élément

dans la boite avec align-items sur le conteneur flex:

#flex-container {
display: flex;
align-items: center;
}
Plusieurs éléments

Les mêmes règles s'appliquent à plusieurs éléments flex:

#flex-container {
display: flex;
justify-content: flex-start;
align-items: center;
}
Plusieurs éléments

Les mêmes règles s'appliquent à plusieurs éléments flex:

#flex-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
Plusieurs éléments

Les mêmes règles s'appliquent à plusieurs éléments flex:

#flex-container {
display: flex;
Justify-content: center;
align-items: center;
}
Plusieurs éléments

Aussi il y a space-between et space-around:

#flex-container {
display: flex;
Justify-content: space-between;
align-items: center;
}
Plusieurs éléments

Aussi il y a space-between et space-around:

#flex-container {
display: flex;
Justify-content: space-around;
align-items: center;
}
 flex-direction

Et vous pouvez également disposer des colonnes au

lieu de lignes:

#flex-container {
display: flex;
flex-direction: column;
}
 flex-direction
Et vous pouvez également disposer des colonnes au lieu de
lignes::

#flex-container {
display: flex;
flex-direction: column;
justify-content: center;
}

Maintenant, justify-content
contrôle la position verticale de la
colonne dans la zone
 flex-direction

Et vous pouvez également disposer des colonnes au lieu de

lignes::
#flex-container {
display: flex;
flex-direction: column;
justify-content: space-around;
}

Maintenant, justify-content
contrôle la position verticale de la
colonne dans la zone
 flex-direction
Et vous pouvez également disposer des colonnes au lieu de
lignes::
#flex-container {
display: flex;
flex-direction: column;
align-items: center;
}

Maintenant, align-items contrôle

l'emplacement horizontal de la
colonne dans la zone
 flex-direction
Et vous pouvez également disposer des colonnes au lieu de
lignes:
#flex-container {
display: flex;
flex-direction: column;
align-items: flex-end;
}

Maintenant, align-items contrôle

l'emplacement horizontal de la
colonne dans la zone
Réalisation d’une
maquette
Modèle Squarespace

Le modèle le plus populaire de Squarespace

ressemble à ceci:
Forme de base

Commencez à
visualiser la
disposition en
termes de boîtes
Forme de base

Commencez à
visualiser la
disposition en
termes de boîtes
Forme de base

Commencez à
visualiser la
disposition en
termes de boîtes :

Essayons d'abord
de faire cette
mise en page
Éléments de sectionnement de
contenu
Name Description
<p> Paragraphe
<h1>-<h6> Titre de section
<article> Un document, une page ou un site. Il
s'agit d'un élément conteneur racine
après le corps.
<section> Section générique d'un document
<header> Section introductive dans un
document,
<footer> Pied de page à la fin d'un
document(section)
<nav> ne "font"
Ces éléments Section
rien;decenavigation
sont fondamentalement des
<div> plus descriptifs. Rend votre HTML plus lisible.
Éléments de sectionnement de
contenu
Name Description
<p> Paragraphe
<h1>-<h6> Titre de section
<article> Un document, une page ou un site. Il
s'agit d'un élément conteneur racine
après le corps.
Préférez ces
<section> Section générique d'un document
<header>
éléments à
Section introductive dans un
<div>
document, quand cela a du
<footer>
sens!
Pied de page à la fin d'un
document(section)
<nav> ne "font"
Ces éléments Section decenavigation
rien; sont fondamentalement des
<div> plus descriptifs. Ce qui rend votre HTML plus lisible.
 Header

Navbar:
- Height: 75px
- Background:
royalblue
- <nav>

Header:
- Height: 400px;
- Background:
lightskyblue
- <header>
Section
principale
Boite grise:
- Espace
environnant: 75
pixels au-dessus
et en dessous;
100px de chaque
côté
- Height: 500px
- Background:
gray
- <section>
 Contenu
Paragraphe jaune:
- Height: 200px
- Background: khaki
- Espace en dessous: 75px
- <p>
Boite orange:
- Height: 400px;
- Width: 48% de la largeur
du parent, avec un
espace entre les deux
- Background: tomato
- <div>
 Footer

Footer:
- Height: 100px
- Background:
Black
- <footer>
 Contenu

Boite Orange :
- Height: 400px;
- Width: 48% de la
largeur du parent,
avec un espace
entre les deux
- Background: tomato
- <div>

C'est là que nous

sommes coincés.