Flexxxxxxxxxxxxxxxxxxx
La hauteur du premier bloc s'adapte au context ainsi que les marges entre les blocs
PLAN
plan
Il y a donc trois grandes parties
Définition : conteneur
parent
Flex conteneur
enfant
Les enfants directs sont des flex-items
flex-conteneur
flex-item
HTML
<Flex conteneur>
<Flex item>
<p>
</Flex item>
<Flex item>
</Flex item>
</Flex conteneur>
Flex items
le bloc bleu est conteneur.
Les blocs verts sont des flex-items pour le bloc bleu.
Flex items
Le bloc rouge contenu dans le bloc vert n'est pas un flex item pour le bloc bleu. Il peut être éventuellement un flex item pour le bloc vert.
Flex à tous les étages !
Un bloc flex peut contenir un autre bloc flex qui peut contenir un bloc flex ...
Forme des blocs
Les formes ressemblent à des divisions rectangulaires.
Remarque
Forme : la propriété radius permettrait de simuler des ronds à partir de forme rectangulaire !
plan
0. Définitions
Il y a donc trois grandes parties
Placement
Placement des blocs
Le placement se fait soit en ligne soit en colonne.
Placement des blocs
Voici un placement en ligne.
1 2 3 4 5 6 7 ...
REmarque : Grid
Grid permet des placements sur les deux dimensions.
AXES
Définition : les axes
Les coordonnées cartésiennes sont renommées en axe principal (main) et axe secondaire (cross).
Définition
Deux cas de figure se présentent en fonction de la propriété flex-flow du bloc conteneur.
Flex-flow | Axe principale | Axe Secondaire |
row | x | y |
column | y | x |
flex-direction
Flex-flow | Axe principale | Axe Secondaire |
row | x | y |
flex-direction
Flex-flow | Axe principale | Axe Secondaire |
column | y | x |
placement sur deux axes
Le placement se fait en deux étapes.
On place un bloc en priorité sur son axe principal puis sur son axe secondaire.
Exemple : flex-direction : row
Exemple : flex-direction : row
1) On choisit un placement sur l'axe principal
Exemple : flex-direction : row
2) On choisit un placement sur l'axe secondaire
Code
HTML et CSS
Ecriture d'un simulateur
HTML
Nous allons prendre le cas d'un flex conteneur avec deux flex-items.
Situation de départ
HTML
<div class="conteneur">
</div>
la propriété class permettra d'associer le style CSS.�La balise div peut être remplacée par toutes balises qui peut être parent : body, session, ul.�
Situation de départ
HTML
<div class="conteneur">
<div class="item"></div>
<div class="item"></div>
</div>
Situation de départ
HTML
<div class="conteneur">
<div class="item">item 1</div>
<div class="item">item 2 item 2</div>
</div>
Remarques
Nous allons appliquer des propriétés
au bloc-conteneur
aux flex-items
CSS
Appliquons au bloc conteneur la propriété flex.
CSS
.conteneur {
}
Display : flex
Les flex-items prennent la hauteur du conteneur
Display : flex
Les flex-items prennent la largeur de leur contenu.
Display : flex
ils se positionnent en ligne !
Bilan : Display : flex
Display : flex
En augmentant la hauteur du conteneur on augmente également la hauteur des flex-items.
Flex-direction
Le positionnement de base est en ligne.
On peut modifier ce comportement par défaut.
Flex-direction
La direction est un besoin à "l'international"
برافو فليكس
bravo flex
布
拉
沃
弯
曲
Flex direction
.conteneur {
}
est équivalent à
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Résumé
.conteneur {
flex-direction: row | row-reverse | column | column-reverse;
}
Placement
Axe principal
Placement : axe principal
A l’aide de la propriété justify-content appliquée au conteneur on peut modifier le placement des blocs entre eux sur l’axe principal
word
Problématique
Comment se répartir l'espace libre disponible entre les blocs ?
Flex direction
.conteneur {
}
est équivalent à
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Flex direction
.conteneur {
}
Résumé
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
}
EOF
Placement
Axe secondaire
Bilan
Nous venons de voir comment placer les blocs sur l'axe principal
Placement sur l'axe secondaire
Placement sur l'axe secondaire
cas de l’alignement : axe secondaire
A l’aide de la propriété align-items appliquée au conteneur on peut déterminer l’alignement entre les blocs sur l’axe secondaire
Align-items
.conteneur {
}
align-items
Nous allons voir comment on peut une fois fixé le comportement sur l'axe principal modifier le comportement sur l'axe secondaire.
Align-items
.conteneur {
}
Align-items
.conteneur {
}
Align-items
.conteneur {
}
Align-items
.conteneur {
}
Align-items
.conteneur {
}
est équivalent à
.conteneur {
}
Align-items
.conteneur {
}
est équivalent à
.conteneur {
}
Align-items
.conteneur {
}
align-items: baseline
Comparaison :
Résumé
.container {
align-items: stretch | flex-start | flex-end | center | baseline | start | end | self-start |
}
Flex-wrap
flex-wrap (conteneur)
En cas de dépassement de la taille du conteneur, les blocs peuvent se mettre sur plusieurs lignes !
Cas
Cas
Cas de blocs sur plusieurs lignes !
Chaque ligne sera traitée séparément.
.conteneur {
}
Chaque ligne sera traitée séparément.
EOF
align-content*
cette propriété intervient dans le cas de la répartition des blocs sur plusieurs lignes !
Résumé
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline
}
Résumé
PLACEMENT DANS LE CONTENEUR
align-content
justify-content
PLACEMENT items
align-items
PLACEMENT propre
align-self
Flexible !
plan
Il y a donc trois grandes parties
Bloc flexible
Les blocs pourront adapter leur taille en fonction de la taille du conteneur !
Taille du conteneur
Comment s'adapte le bloc vert lorsque son bloc conteneur change de taille ?
flex
C'est au travers de la propriété flex sur les blocs-items que l'on va définir le comportement.
Flex : complexe
Il y a de nombreuses façons d'exprimer le comportement
flex: none
flex: <'flex-grow'>
flex: <'flex-basis'>
flex: <'flex-grow'> <'flex-basis'>
flex: <'flex-grow'> <'flex-shrink'>
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
référence MDN
Flex : complexe
Il y a de nombreuses façons d'exprimer le comportement
flex: none
flex: <'flex-grow'>
flex: <'flex-basis'>
flex: <'flex-grow'> <'flex-basis'>
flex: <'flex-grow'> <'flex-shrink'>
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
référence MDN
Flex : 3 valeurs
.flex-item {
flex : 1 1 auto;
}
Flex : 3 valeurs
.flex-item {
flex : 1 1 auto;
}
auto : Indique qu'une valeur est calculée de manière automatique par le navigateur.
auto
auto est la taille du contenu
Flex : 3 valeurs
.flex-item {
flex : 1 1 auto;
}
<'flex-grow'> indique le comportement si le conteneur est plus grand.
Ici la valeur est 1. Cette valeur donne un poids de pondération vis à vis des autres blocs
Flex : 3 valeurs
.flex-item {
flex : 1 1 auto;
}
<'flex-shrink'> indique le comportement si le conteneur est plus petit.
Ici la valeur est 1. Cette valeur donne un poids de pondération vis à vis des autres blocs
EOF
Flex : Exemples
Nous allons voir une série de cas !
Flex
.conteneur {
}
bloc1 {
flex: 1 1 auto;
}
Flex
.conteneur {
}
bloc1 {
flex: 1 1 auto;
}
Flex
.conteneur {
}
bloc1 {
flex: 1 1 auto;
}
Flex
.conteneur {
}
bloc1 {
flex: 10 1 auto;
}
Le résultat avec 10 serait le même que celui avec 1 !
Flex
.conteneur {
}
bloc1 {
flex: 1 1 auto;
}
Exemple avec deux blocs
Taille fixée à 100px
Taille fixée à 100px
.conteneur {
}
bloc {
flex: 1 1 100px;
}
Taille fixée à 100px
.conteneur {
}
bloc {
flex: 1 1 100px;
}
auto
.conteneur {
}
bloc {
flex: 1 1 100px;
}
100px+aug*1/2
100px+aug*1/2
remarque
.conteneur {
}
bloc {
flex: 10 1 100px;
}
100px+aug*10/20
Le résultat avec 10 (10/20) serait le même que celui avec 1 (½)!
100px+aug*10/20
EOF
Numériquement
Nous allons calculer l'augmentation (diminution) des blocs en fonction de la taille de leur conteneur !
Le conteneur est ici le body.
Et ceci avec des valeurs de flexibilité différentes entre les blocs.
Situation 1)
�body a pour taille 1000px. Il est le conteneur de deux blocs de taille initiale 300px et 100px.
bloc1 {� flex : 1 5 300px;�}�bloc2 {� flex : 2 1 100px;�}
��
body = 1000px : Valeur de l'augmentation ?
bloc1 {� flex : 1 5 300px;�}�bloc2 {� flex : 2 1 100px;�}
body est plus grand que la somme des deux blocs.
L'augmentation potentielle est de [1000-300-100]= 600px��
body = 1000px Répartition de cette augmentation
bloc1 {� flex : 1 5 300px;�}�bloc2 {� flex : 2 1 100px;�}�
Le bloc1 va augmenter de 1/(1+2) * augmentation = 1/3*600 = 200px
La taille du bloc1 sera égale à (300 + 200)px = 500px��
Situation 2)
�body a pour taille 200px.
bloc1 {� flex : 1 5 300px;�}�bloc2 {� flex : 2 1 100px;�}
�
��
La diminution de [300+100-200]= 200px
�bloc1 {� flex : 1 5 300px;�}�bloc2 {� flex : 2 1 100px;�}�
Le bloc1 va diminuer de 5/(1+5) * diminution = 5/6*200 ≃ 160
Sa taille sera égale à (300 - 160)px = 140px��
Exemple avec deux blocs
cas où la valeur initiale est auto :
auto : Indique qu'une valeur est calculée de manière automatique par le navigateur.
auto
.conteneur {
}
bloc {
flex: 1 1 auto;
}
auto
.conteneur {
}
bloc {
flex: 1 1 auto;
}
auto+aug*1/2
auto+aug*1/2
Le bloc1 reste < au bloc2
EOF
Flex : complexe
Il y a de nombreuses façons d'exprimer le comportement
flex: none
flex: <'flex-grow'>
flex: <'flex-basis'>
flex: <'flex-grow'> <'flex-basis'>
flex: <'flex-grow'> <'flex-shrink'>
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>
référence MDN
auto
.conteneur {
}
bloc{
flex: 1 1;
}
aug*1/2
aug*1/2
Proportion entre blocs
.conteneur {
}
bloc1{
flex: 1;
}
bloc2{
flex: 2;
}
2 : aug*2/3
1 : aug*1/3
👿Alias
Il existe de nombreux raccourcis d'écriture !
Des alias !
par défaut
flex: 0 1 auto
Des alias !
auto
flex: 1 1 auto
Des alias !
initial
flex: 0 1 auto
Des alias !
none
flex: 0 0 auto
🆒Des alias !
par défaut
flex: 0 1 auto
auto
flex: 1 1 auto
initial
flex: 0 1 auto
none
flex: 0 0 auto
Des alias ! <positive-number>
flex: 100%;
flex: 100px;
Des alias ! <positive-number>
flex: 1;
Etude de comportement
Nous allons essayer de comprendre le comportement des blocs en fonction de leur propriété et de la taille du conteneur.
none
flex: none
"flex: 0 0 auto"
Cas d'une augmentation du conteneur
🥷La taille du bloc "none" reste identique.
+
none
flex:none
"flex: 0 0 auto"
Cas d'une diminution du conteneur
🥷La taille du bloc "none" reste identique.
-
Testez vous connaissance ! AUTO
auto
"flex: 1 1 auto"
+
-
-
+
-
-
Testez vous connaissance ! Initial
initial
"flex: 0 1 auto".
-
=
+
-
PLAN
Ordre
order
Nous verrons en TD que la propriété order permet de définir l'ordre d'apparition des blocs dans le conteneur.
Outils
travail perso
simulateur
EOF
Taille des colonnes
avant