Voila, nous attaquons les « flex-box ». Mise en page beaucoup plus simple que les flottant.
Les codes:
dispay: flex; (place les blocs horizontalement)
flex-wrap: wrap; (passe à la ligne, aussi pour les colonnes)
no-wrap;
wrap-reverse;
flex-direction: (désigne l’axe principal)
row;
row-reverse;
column;
column-reverse;
justify-content: (aligne sur l’axe principal)
flex-start;
flex-end;
center;
space-around;
space-between;
space-evenly;
align-items: (aligne sur l’axe secondaire)
stretch;
flex-start;
flex-end;
center;
align-content: (réparti plusieurs lignes)
flex-start;
flex-end;
center;
space-around;
space-between;
strech;
align-self: (aligne un élément sur l’axe secondaire)
flex-start;
flex-end;
Autre possibilité:
order:
3;
(place l’élément dans l’ordre désigné, si tous désignés. on peu en désigner un comme pour le box-sizing avec -100 par exemple)
flex: (permet de définir les valeurs de cette propriété dans cet ordre : flex-grow
, flex-shrink
, flex-basis
.)
flex: initial;
flex: auto;
flex: none;
flex: <nombre-positif>;
flex:
1;
(prend tout l’espace restant)
2;
(l’élément peut grossir 2 fois plus que le premier)
flex-grow:
0;
(capacité de grossir, 0 empêche la déformation)
2;
(déforme 2fois plus)
flex-shrink:
1;
(capacité à maigrir, le 1 autorise la déformation)
2;
(déforme 2fois plus)
flex-basis:
50%;
50px;
(donne la largeur de l’élément sur l’axe principale – il représente la base)
flex-basis:
calc(100% - 50% - 25% - 10px);
Mise en pratique
<style>
#exercice1{
display:flex;
}
#exercice1 .item:nth-child(3){
order: -10;
}
#exercice1 .item:nth-child(4){
order: 10;
}
</style>
<style>
#exercice2{
display:flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
height: 300px;
}
#exercice2 .item{
flex-basis: 20%;
height: 100px;
}
</style>
<style>
#exercice3{
display:flex;
justify-content:space-between;
align-items: center;
}
#exercice3 .item{
width: 60px;
}
</style>
<style>
#exercice4{
display: flex;
flex-wrap: wrap;
}
#exercice4 .item:nth-child(5),
#exercice4 .item:nth-child(6),
#exercice4 .item:nth-child(1),
#exercice4 .item:nth-child(2){
flex-basis: 25%;
}
#exercice4 .item:nth-child(3),
#exercice4 .item:nth-child(7),
#exercice4 .item:nth-child(8),
#exercice4 .item:nth-child(4){
flex-basis: 50%;
}
</style>
<style>
#exercice5{
display: flex;
flex-wrap: wrap;
}
#exercice5 .item:nth-child(1),
#exercice5 .item:nth-child(2){
flex-basis: 100%;
}
#exercice5 .item:nth-child(1){
order:2;
}
#exercice5 .item:nth-child(2){
order:1;
}
#exercice5 .item:nth-child(3){
order:6;
flex-basis: 50%;
}
#exercice5 .item:nth-child(4){
order:3;
flex-basis: 25%;
}
#exercice5 .item:nth-child(5){
flex-basis: 25%;
order:4;
}
#exercice5 .item:nth-child(6){
order:7;
flex-basis: 50%;
}
#exercice5 .item:nth-child(7){
order:8;
flex-basis: 25%;
}
#exercice5 .item:nth-child(8){
order:8;
flex-basis: 25%;
}
</style>
<style>
#exercice6 .item{
margin:5px;
}
#exercice6{
display: flex;
flex-wrap:wrap;
}
#exercice6 .item:nth-child(1){
flex-basis:calc(100% – 5px);
}
#exercice6 .item:nth-child(2),
#exercice6 .item:nth-child(3),
#exercice6 .item:nth-child(8)
{
flex-basis:calc(100% – 50% – 25% – 10px);
}
#exercice6 .item:nth-child(5),
#exercice6 .item:nth-child(4),
#exercice6 .item:nth-child(6){
flex-basis:calc(100% – 50% – 10px);
}
#exercice6 .item:nth-child(7){
flex-basis:calc(100% – 25% – 10px);
}
</style>
<style>
#exercice7 .item{
width: 50%;
}
#exercice7{
display: flex;
flex-direction: column;
}
#exercice7 .item:nth-child(3n+1){
align-self: flex-start;
}
#exercice7 .item:nth-child(3n){
align-self: flex-end;
}
#exercice7 .item:nth-child(3n-1){
align-self:center;
}
</style>
<style>
#exercice8{
height:200px;
display:flex;
flex-direction: column-reverse;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
}
#exercice8 .item{
width: 30%;
}
</style>
<style>
#exercice9{
display:flex;
flex-wrap:wrap;
justify-content: space-around;
}
#exercice9 .item{
margin: 20px;
width: 100px;
height: 100px;
}
</style>
Autre exercice.
Petit écran:
Ecran intermédiaire:
Grand écran:
<style>
#exercice1{
display:flex;
flex-wrap:wrap;
}
#exercice1 .item{
flex-grow: 2;
flex-basis:150px;
}
</style>
<style>
#exercice2{
display:flex;
}
#exercice2 .item{
flex-basis: 100px;
margin:5px;
flex-shrink: 0;
}
#exercice2 .item:nth-child(2){
flex-grow: 1;
}
</style>
<style>
#exercice3{
display:flex;
}
#exercice3 .item{
width:16.666%
}
#exercice3 .item:nth-child(even){
width:33.333%;
}
</style>
<style>
#exercice4{
display:flex;
flex-wrap:wrap;
}
#exercice4 .item{
flex-grow: 1;
flex-basis: 300px;
}
</style>