28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement flexbox

Bonjour
Je m’entraine sur Flex box à partir d’un Template de Raphael afin de l'adapter à mes besoins.
Je souhaite sur les pages suivantes mettre les 8 div rouges sur 2 lignes dans une seule div aside ???
(en bas de page)
J’y suis parvenu sur la page flex2 en doublant la div aside.
Mais est-il possible de le faire en utilisant qu’une seule aside ???

http://goxo.eu/flex1.html 8 div alignées Smiley decu 1 div aside
http://goxo.eu/flex2.html 4 div alignées Smiley rolleyes 2 div aside

Merci de votre retour.

Bonne journée
Modifié par africa (04 Jan 2017 - 09:46)
Administrateur
Hello africa et tous mes voeux pour cette nouvelle année.

Dans Flexbox, tu ne peux pas passer à la ligne sans l'exprimer explicitement sur le container : il te faut donc un flex-wrap: wrap; pour commencer.

Ensuite, il va falloir jouer sur la taille des enfants. Par défaut, il se rétrécissent (flex-shrink: 1) et ne passeront pas à la ligne. Tu peux par exemple leur indiquer une largeur ou une largeur minimale pour qu'ils passent à la ligne (ex. .pub {width: 20%} ou .pub {min-width: 20%}).

Bonne chance Smiley smile
Sujet clos
Aller à