Colonnes x2
col 1
col 2
Comportement de base
- Les colonnes prennent toute la largeur
- Les colonnes se wrap
.colonnes {
flex-direction: row;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Comportement avec nombre de colonnes affichée x3
- 3 colonnes par rangée
- Les dernieres colonnes s’étirent pour prendre toute la largeur
.colonnes {
flex-direction: row;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
/* Exemple pour 3 colonnes */
.nbr-col-2, .nbr-col-3, .nbr-col-4 {
flex-wrap: wrap;
}
.nbr-col-3 .colonnes__item {
flex-basis: calc(calc(100% - var(--gap) * 2) / 3);
}
col 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
col 3
col 4
col 5
Créer colonnes qui ne s’étirent pas et aligné à gauche
.colonnes {
flex-direction: row;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.nbr-col-3 .colonnes__item {
flex-basis: calc(calc(100% - var(--gap) * 2) / 3);
}
.nbr-col-2, .nbr-col-3, .nbr-col-4 {
flex-wrap: wrap;
}
/* Créer une class no-stretch */
.colonnes.no-stretch .colonnes__item{
flex-grow: 0;
}
col 1
col 2
col 3
col 4
col 5
Créer colonnes qui ne s’étirent pas et aligné au centre
.colonnes {
flex-direction: row;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.nbr-col-3 .colonnes__item {
flex-basis: calc(calc(100% - var(--gap) * 2) / 3);
}
.nbr-col-2, .nbr-col-3, .nbr-col-4 {
flex-wrap: wrap;
}
/* Créer une class no-stretch */
.colonnes.no-stretch .colonnes__item{
flex-grow: 0;
}
/* Créer une class align-center */
.colonnes.align-center {
justify-content: center;
}
col 1
col 2
col 3
col 4
col 5
Créer colonnes avec largeur fixe 300 px à gauche
.colonnes {
flex-direction: row;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.nbr-col-3 .colonnes__item {
flex-basis: calc(calc(100% - var(--gap) * 2) / 3);
}
.nbr-col-2, .nbr-col-3, .nbr-col-4 {
flex-wrap: wrap;
}
/* Créer une class largeur-fixe */
.colonnes.largeur-fixe .colonnes__item{
width: 300px;
flex-grow: 0;
flex-basis: inherit;
}
col 1
col 2
col 3
col 4
col 5
Créer colonnes avec largeur fixe 300 px et aligner
.colonnes {
flex-direction: row;
flex-wrap: wrap;
}
.colonnes__item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.nbr-col-3 .colonnes__item {
flex-basis: calc(calc(100% - var(--gap) * 2) / 3);
}
/* Créer une class largeur-fixe */
.colonnes.largeur-fixe .colonnes__item{
width: 300px;
flex-grow: 0;
flex-basis: inherit;
}
/* Créer une class align-center */
.colonnes.align-center {
justify-content: center;
}
col 1
col 2
col 3
col 4
col 5
Colonne avec galerie 1 70% + 2 40-60%
eziongz ,zlk, zrgl nkqen
zreqstlkjnqzlkerjdfng kjqwebrdgf b zqkrjfbg kjb <zkrjsf gkj b<zrskdjfvbg mkj;q,newr dgcnb
Colonne avec galerie et group
eziongz ,zlk, zrgl nkqen
texte dans group
zreqstlkjnqzlkerjdfng kjqwebrdgf b zqkrjfbg kjb <zkrjsf gkj b<zrskdjfvbg mkj;q,newr dgcnb