flex-basis - row

Exemple 01

Dans l'exemple 01, je détermine une max-width au bloc parent. Si cette dernière est moindre que le double de la valeur de flex-basis des items, alors ces derniers se mettront les uns en dessous des autres.

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.

Code ex 01:

.exemple-01 {
display: flex;
flex-direction: row;
flex-wrap: wrap;

max-width: 330px; 
}

.exemple-01 > * {

flex: 1 1 150px; 
/* flex-grow - flex-shrink - flex-basis */
/* comme flex-shrink à pour valeur par défaut 1, il doit être possible de l'ometre: */
/* et flex: 1 150px; semble fonctionner */ 
}

				

Le même exemple avec une max-width de 70%.

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.

flex-basis - column

Exemple 02

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.
Bloc dix.

Code ex 01:

.exemple-02a {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #1453ED;
margin: 0 auto;
height: 300px; 
max-width: 50%;
}

.exemple-02a > * {

flex: 1 1 80px; 
}
				

Pour générer un retour à la ligne avec une direction 'column', il faut que la somme des 'height' des items soit supérieur à la 'height' de leur parent sinon voir ci-dessous.

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.
Bloc dix.

Même code CSS mais moins d'items.

Bloc un.
Bloc deux.
Bloc trois.
Bloc dix. Pour générer un retour à la ligne avec une direction 'column', il faut que la somme des 'height' des items soit supérieur à la 'height' de leur parent. Ici, il n'y a pas assez d'items !

Code:

/* code identique aux deux exp précédents */
/* seul change le nb d'items */				
				
.exemple-02b {
display: flex;
flex-direction: column;
flex-wrap: wrap;

height: 300px;
max-width: 500px;
}

.exemple-02b > * {

flex: 1 1 30px; 
}

				

Par contre, le code en l'état pose des problèmes (A RESOUDRE...):

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.
Bloc dix. Pour générer un retour à la ligne avec une direction 'column', il faut que la somme des 'height' des items soit supérieur à la 'height' de leur parent. Par contre, l'item sort de son parent ! Il prend à son tour le 'max-width' de son parent.

Code:

.exemple-02c {
display: flex;
flex-direction: column;
flex-wrap: wrap;

height: 300px; 
max-width: 50%;
}

.exemple-02c > * {

flex: 1 1 30px; 
}
				

Code en cours de test !!! code de départ: 02c - code de test 02e...

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.

Bloc dix. Pour générer un retour à la ligne avec une direction 'column', il faut que la somme des 'height' des items soit supérieur à la 'height' de leur parent. Par contre, l'item sort de son parent ! Il prend à son tour le 'max-width' de son parent.

Première proposition de code:

				/* resultat ci-dessus */
.exemple-02e {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #1453ED;
margin: 0 auto;

height: 300px;
max-width: 500px; /* essayer uniquement des valeurs relatives ! */

}

.exemple-02e > * {
border: 1px solid #7FA1F0;

flex: 1 1 25px;
max-width: 80%;

/* flex-grow - flex-shrink - flex-basis */
}
				

Même problème...

Bloc un.
Bloc deux.
Bloc trois.
Bloc quatre.
Bloc cinq.
Bloc six.
Bloc sept.
Bloc huit.
Bloc neuf.
Bloc dix. Pour générer un retour à la ligne avec une direction 'column', il faut que la somme des 'height' des items soit supérieur à la 'height' de leur parent. Par contre, l'item sort de son parent ! Il prend à son tour le 'max-width' de son parent.

Code:

.exemple-02d {
display: flex;
flex-direction: column;
flex-wrap: wrap;

height: 300px; 
max-width: 50%;
}

.exemple-02d > * {

flex: 1 1 15%; 
}