Colonnes - Berceau v3

Aucune archive à afficher.

Colonnes x2

francecom

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.

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

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