[Résolu] Le premier élément doit occuper toute la hauteur du contenant

Bonjour,

Je me pose une question de positionnement..

<div>
<a href="#">Un</a>
<a href="#">Deux</a><a href="#">Trois</a><a href="#">Quatre</a><a href="#">Cinq</a><a href="#">Six</a>
</div>

Si le contenu s'étale sur deux lignes je veux que Un occupe toute la hauteur :

Un Deux Trois Quatre
...... Cinq Six


Bien sûr c'est facile avec un Display: table mais je me demande si c'est aussi possible avec Flexbox sans ajouter des tonnes de structure en plus.
J'ajoute que cela doit être fluide sans largeur ou hauteur imposées.

C'est aussi possible avec Grid bien sûr mais je connais mal et si possible je préfère Flexbox.

Merci d'avance.
Modifié par boteha_2 (30 Jul 2022 - 21:11)

Bonjour,

Pour l'instant je n'ai rien trouvé de mieux que de faire flotter à gauche le premier élément.

La structure est légèrement modifiée :

<div>
<a href="#">Un</a>
<p><a href="#">Deux</a><a href="#">Trois</a><a href="#">Quatre</a><a href="#">Cinq</a><a href="#">Six</a></p>
</div>

div > a: first-child {float: left}
p {display: flex}

Je passe p en display: flex pour faciliter la gestion des espacements horizontaux.

Une meilleure solution doit exister...
Merci d'avance.

Bonjour,

Petit codepen afin d'illustrer la question.

Si quelqu'un comprend les problèmes d'alignements verticaux je suis intéressé...

Bonsoir,

Flex peut être imbriquer et en partant de ta structure ,
- on peut aussi mettre footer en parent flex.
- mettre <p> en flex, wrap et flex-grow
- mettre l'avant dernier <a> en marge-left (ou inline-start) en auto

Aprés je ne suis pas certains de comprendre ceux que tu cherches à faire, du moins avec les deux derniers V ? ?

https://codepen.io/gc-nomade/pen/zYWppVd

cdt
Modifié par gcyrillus (31 Jul 2022 - 22:54)

Bonjour gcyrillus,

Merci de ton suivi.

À quelques détails près ce que tu as fait correspond exactement au projet.

Les 2 V, c'est simple, il faut les pousser vers la droite en étant sur la dernière ligne (si plusieurs lignes), c'est ce que tu fais.

Je regarde tout cela avec attention ce soir.

Une petite question en passant, je veux solidariser les 2 V, qu'ils soient forcément sur la même ligne.
Cela me semble impossible à faire en CSS, il faut changer un peu la structure.

<span>
<a id="w" href="#bas">V</a>
<a href="#header">&Lambda;</a>
</span>

span {white-space: nowrap}

Modifié par boteha_2 (01 Aug 2022 - 12:13)

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.

À quelques détails près ce que tu as fait correspond exactement au projet.

Les 2 V, c'est simple, il faut les pousser vers la droite en étant sur la dernière ligne (si plusieurs lignes), c'est ce que tu fais.

Je regarde tout cela avec attention ce soir.

Une petite question en passant, je veux solidariser les 2 V, qu'ils soient forcément sur la même ligne.
Cela me semble impossible à faire en CSS, il faut changer un peu la structure.

<span>
<a id="w" href="#bas">V</a>
<a href="#header">&amp;Lambda;</a>
</span>

span {white-space: nowrap}

Oui tout à fait, ils peuvent être gérer comme le bouton en les sortant du paragraphe et cela simplifi aussi la feuille de style: example https://codepen.io/gc-nomade/pen/xxWpBEo
Modifié par gcyrillus (01 Aug 2022 - 14:52)

Encore merci de ton suivi.

Par contre :

boteha_2 a écrit :
Les 2 V, c'est simple, il faut les pousser vers la droite en étant sur la dernière ligne (si plusieurs lignes), c'est ce que tu fais.

Sauf erreur si tu les sors du p ils ne sont plus alignés sur la dernière ligne, c'est ce que je vois sur la nouvelle version de ton codepen.
L'ajout d'un span permet quand même de simplifier les CSS en ciblant ce span au lieu des nth-last-child.

Je m'y mets ce soir.

boteha_2 a écrit :
Encore merci de ton suivi.

Par contre :
Sauf erreur si tu les sors du p ils ne sont plus alignés sur la dernière ligne, c'est ce que je vois sur la nouvelle version de ton codepen.
L'ajout d'un span permet quand même de simplifier les CSS en ciblant ce span au lieu des nth-last-child.

.

Il faut simplement lui assigné des marges différentes que celles du boutons.
en fait tu as là , un flex de trois colonnes , puis un enfant flex qui passe sur plusieurs ligne et un enfant simple flex pour garder ses 2 éléments cote à cote. align-self ou margin permettent ensuite d'aligner verticalement le premier et le dernier enfant flex

Encore merci de ton suivi.

Cependant, sur ton codepen, l'alignement vertical des flèches n'est pas parfait.

Quel inconvénient y a-t-il à laisser <aside> dans p avec margin-left: auto ?
Là on est sûr d'un alignement vertical parfait sut la dernière ligne, non ?

Par ailleurs, si plusieurs lignes, il faudrait que le bouton soit aligné vertical en haut.

#footer > button {margin: auto 0.6em}

Il suffit de remplacer auto par 0, non ?
Modifié par boteha_2 (01 Aug 2022 - 18:55)

boteha_2 a écrit :
Encore merci de ton suivi.

Cependant, sur ton codepen, l'alignement vertical des flèches n'est pas parfait.

Quel inconvénient y a-t-il à laisser &lt;aside&gt; dans p avec margin-left: auto ?
Là on est sûr d'un alignement vertical parfait sut la dernière ligne, non ?

Par ailleurs, si plusieurs lignes, il faudrait que le bouton soit aligné vertical en haut.

#footer > button {margin: auto 0.6em}

Il suffit de remplacer auto par 0, non ?

Comme tu as compris comment faire l'alignement à partir des marges, c'est comme tu veut , pas comme je l'aurai compris.
Fait comme tu l'entends, ce ne sont que des règles de styles ... et je n'ai pas la réputation d'avoir la moindre fibre de designer

Cdt

Bonjour,

j'ai un peu modifié mon codepen en m'inspirant de celui de gcyrillus.

A priori les objectifs semblent atteints, juste des trucs que je ne comprends pas.

Si je remplace <span> par <aside> cela ne marche plus.

Je suis obligé de régler le positionnement vertical par les marges.
Je pensais que align_items ou align-self étaient faits pour cela.

Bonjour,

J'ai avancé mes développements et grâce au code de gcyrillus (que je remercie encore) cela se passe plutôt bien.

J'ai un peu compliqué le codepen avec un paragraphe de texte au-dessus du footer et un autre en dessous.

Mon objectif est d'avoir le footer fixe en bas de page et j'y arrive facilement avec cette déclaration.

div#footer {position: fixed; bottom: 0; background-color: white}

Ma question est de savoir s'il est possible d'obtenir le même effet avec les attributs de flexbox, sans utiliser position: fixed, ce qui serait plus élégant.

Cela me semble impossible mais je pose quand même la question.

Bonjour,

Je coche Résolu., avec grand merci à gcyrillus.

Je relance une autre discussion avec le même codepen.