avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3560
Maxi-Code master - Modo voleuse de PC ❤ - Ex-admin
Voir le profil de l'utilisateur
# Positionnement avec displayle Lun 4 Déc 2017 - 23:05

Positionnement avec display

Créé par: Batty | Validé par: Reine des Ténèbres | Difficulté: Moyen | Navigateur(s): Tous | Version: tous


Rendu

Spoiler:
Élément 1
Élément 2
Élément 3
Élément 4

Présentation du tutoriel


Dans ce tutoriel je vais vous apprendre à positionner facilement des éléments avec l’attribut display.

Explications



Un petit merci rendra les explications visibles !
Si vous avez une question sur ce tuto, cette section est disponible.



avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2353
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Positionnement avec displayle Mar 5 Déc 2017 - 22:46
Coucou :3

Très bon tuto, merci :3

Une toute petite remarque ici :
space-around idem, mais il y aura pas d’espace entre eux et les extrémités (haut/bas) du conteneur.

Je pense qu'il faut enlever la négation vu qu'il y aura de l'espace autour des éléments. et donc forcément une marge.


avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3560
Maxi-Code master - Modo voleuse de PC ❤ - Ex-admin
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Mar 5 Déc 2017 - 22:53
Ah oui ! C'est ce qui arrive quand on fait des copier/coller XD

J'ai modifier



avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2353
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Positionnement avec displayle Mar 5 Déc 2017 - 22:54
Je valide donc ton tuto, merci


avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 951
Accro au forum
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Sam 9 Déc 2017 - 21:00
Merci, ça va me servir !
avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 192
Membre timide
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Sam 13 Jan 2018 - 19:37
Merci !
avatar
Sexe : Féminin
Date d'inscription : 14/01/2017
Messages : 1279
Maxi-Code master
Voir le profil de l'utilisateurhttp://www.amai-gakuen.org/
# Re: Positionnement avec displayle Jeu 18 Jan 2018 - 15:44
Merciii plz


Merci Funeral !  

Spoiler:

Merci Naütilus. ! :'D

Merci Reine des Ténèbres !  Coeur 2

Merci Eskimo. !  Coeur


Merci Milou ! Coeur 2
avatar
Sexe : Féminin
Date d'inscription : 02/02/2018
Messages : 61
Newbie
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Mer 14 Mar 2018 - 14:43
Merci pour ce tutoriel
avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Mer 14 Mar 2018 - 16:23
Juste pour voir quel display est utilisé ici 🤔
Merci en tout cas ^^

Edit : au niveau de display flex, il aurait pu être intéressant de parler de flex-direction (ou flex-flow pour la propriété combinée direction + wrap) qui permet de choisir entre une disposition en ligne, en ligne inversée, en colonne  ou en colonne inversée.
Lorsqu'on passe en disposition colonne il faut cependant faire attention, l'utilisation de justify-content et d'align-item s'inversent. Justify s'occupe alors de l'axe vertical tandis que align s'occupe de l'axe horizontal.
Cela s'explique de la manière suivante :
Justify-content s'occupe de l'alignement de l'axe principal, c'est à dire de l'axe d'écriture. Si on a une disposition en ligne, l'axe d'écriture est horizontal, en colonne il devient vertical.

Notons aussi malgré tout la valeur "space-evenly" pour justify-content.
Elle n'est pas reconnue par Internet Explorer, mais sur les versions les plus récentes des autres navigateurs, elle permet d'avoir l'exact même espace entre chaque bloc et entre les blocs et les bordures dans le sens de l'axe d'écriture (donc left & right pour un flex-direction: row, (valeur par défaut de flex-direction au passage) )

Il faut aussi noter que beaucoup de propriétés liés aux flexbox auront des bugs sous IE11 et IE 10 (seules versions de IE à pouvoir à peu près supporter flexbox) si des min/max-height/width sont définis.


Mais la qualité des explications est au top pour le reste
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3560
Maxi-Code master - Modo voleuse de PC ❤ - Ex-admin
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Jeu 15 Mar 2018 - 12:29
Merci des précision apporter au tuto je les est ajouté =)



avatar
Sexe : Masculin
Date d'inscription : 23/11/2013
Messages : 51
Newbie
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Jeu 15 Mar 2018 - 12:40
De rien, c'est normal ^^ :P
avatar
Sexe : Féminin
Date d'inscription : 07/03/2018
Messages : 30
# Re: Positionnement avec displayle Jeu 15 Mar 2018 - 16:10
Merci pour le tuto. :)
avatar
Sexe : Féminin
Date d'inscription : 20/01/2018
Messages : 1410
Member One
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Dim 6 Mai 2018 - 15:27
Merci ! Câlin 3
avatar
Sexe : Masculin
Date d'inscription : 08/05/2018
Messages : 28
Newbie
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Mer 9 Mai 2018 - 0:11
Merci.
avatar
Sexe : Féminin
Date d'inscription : 07/06/2016
Messages : 130
Membre timide
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Mer 16 Mai 2018 - 15:08
Mirci <3
avatar
Sexe : Féminin
Date d'inscription : 16/05/2018
Messages : 9
Newbie
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Jeu 17 Mai 2018 - 2:13
Merci c:
avatar
Sexe : Féminin
Date d'inscription : 28/03/2013
Messages : 1148
Idole suprême de la plèbe au rang particulièrement long
Voir le profil de l'utilisateur
# Re: Positionnement avec displayle Sam 19 Mai 2018 - 17:27
Merci !
avatar
Sexe : Féminin
Date d'inscription : 01/04/2018
Messages : 46
# Re: Positionnement avec displayle Mar 29 Mai 2018 - 15:30
merci pour le tutoriel
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum