18008 sujets

Questions générales et questions de débutants

Alignement horizontal et non vertical

Les liens sont de simples balises <a>.
Il n'y a aucune raison qu'ils provoquent des retours à la ligne.
Tu peux ajouter 
nav a {display:block;}


D'autre part, la ligne
nav {align-items: flex-start; }
ne sert à rien dans ce cas.
Administrateur
fl0645 a écrit :
Bonjour, je copie le code du livre "flexbox" et je n'obtiens pas la même chose, les liens devraient être alignés verticalement, or là ils sont sur la même ligne...
Qu'est-ce que j'ai loupé ?
Merci d'avance !!

https://codepen.io/fl0645/pen/RwPQadP

Hello,

Voici ton code :
body{
    display: flex;
    align-items: flex-start;
}
nav {
    width: 10em;
    background-color: coral;
    align-items: flex-start;
}
.content{
    flex: 1;
    margin-left: 8px;
}


Je ne comprends pas ce que tu veux dire par "les liens devraient être alignés verticalement", as-tu une image de ce que tu veux obtenir ?

Remarque importante : tu tentes un "align-items: flex-start;" sur l'élément <nav>, or cet élément ne peut pas appliquer cette propriété car elle est réservée aux flex-containers. Chez toi, <nav> n'est qu'un flex-item, ce n'est pas un flex-container. Si tu veux appliquer cette propriété, il faut ajouter un "display: flex;" (ou inline-flex) sur <nav>.

Bonne journée Smiley smile
Administrateur
Jean-Pierre-Bruneau a écrit :
tu peux prendre le code
https://codepen.io/jplyne/pen/mdJPKyV?editors=1100

Hello Jean-Pierre,

J'avoue que je ne vois pas du tout le rapport entre ton menu et la question posée au départ. C'est un peu déstabilisant pour lui s'il copie le code et qu'il remarque que ce n'est pas du tout ce qu'il demande, tu ne crois pas ?
Re, j'ai enlevé ce que @Alainpre me conseille, je pensais qu'en appliquant display:flex à body, tous les enfants et les sous-enfants (nav et <a>) récupèrent la propriété flex ?

J'ai ajouté un flex-direction: column; à navigation pour le block de navigation situé à gauche, par contre le texte devrait être à droite du bloc de navigation, or là il est dessous...

voici le code actualisé, merci d'avance,

https://codepen.io/fl0645/pen/RwPQadP
Administrateur
fl0645 a écrit :
je pensais qu'en appliquant display:flex à body, tous les enfants et les sous-enfants (nav et &lt;a&gt;) récupèrent la propriété flex ?

En appliquant display: flex sur <body> :
- il devient un flex-container
- ses enfants directs (<nav> et <main> chez toi) deviennent des flex-items (ils reconnaissent la propriété flex en effet). Ils ne sont pas des flex-containers
- ses petits-enfants (<a>, etc.) ne sont pas concernés par ce modèle. Ils ne sont ni flex-container ni flex-item. Aucune propriété de Flexbox ne les atteint.

fl0645 a écrit :
J'ai ajouté un flex-direction: column; à navigation pour le block de navigation situé à gauche, par contre le texte devrait être à droite du bloc de navigation, or là il est dessous...

Flex-direction: column sur <nav> va afficher ses enfants verticalement, c'est ce que je vois dans ton codepen.

Par "le texte devrait être à droite du bloc de navigation", tu parles du bloc <main> ? Si oui, ce bloc ne peut pas être affecté par des propriétés que tu vas appliquer sur son frère <nav>.

Par contre, s'il se place en dessous de la navigation, c'est parce que tu as appliqué un flex-direction: column sur <body>, donc ses deux enfants <nav> et <main> s'affichent les uns sous les autres. Il suffit de l'enlever pour qu'ils s'affichent à nouveau côte à côte.
Modifié par Raphael (11 Mar 2020 - 14:38)
Meilleure solution
Sujet clos
Aller à