dupont flex box
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
CSS1 {
flex: 1 1 100%;text-align: center;
}
Chaque bloc prend 100% de la place dispo. la propriété flex est inibée.
https://output.jsbin.com/ALuloKa/12
CSS2 {
flex: 0 1 50px;text-align: center;
}
https://output.jsbin.com/ALuloKa/14
Chaque bloc prend 50px et se place sur une ligne (la ligne axis)
CSS 3 {
div:nth-child(2n+1) {flex: 4 4 100px;
}
cas ou il reste de l'espace
https://output.jsbin.com/ALuloKa/18
cas où il manque de l'espace
https://output.jsbin.com/ALuloKa/19
si la taille des deux blocs est inférieure à la taille du body le bloc A aura 1/4 de la différence restante.
Inscription à :
Articles (Atom)