Discussion :

[JijiSound]

Salut tout le monde,


Je débarque tout juste dans le monde du développement web, je suis en train de découvrir Flexbox et ses propriétés et je ne sais pas si j'ai loupé ou mal compris quelque chose mais même en relisant le cours plein de fois je n'arrive pas à faire une mise en page qui parait assez simple sur le papier :

Je vous ai fait un petit schéma avec mes talents de graphiste :




mon conteneur est avec la bordure rouge
J'aimerais que mes deux éléments soient placés comme sur mon schéma mais je n'y arrive pas.

Avec un display: flex
Un justify-content : space_between; les positionne bien sur l'axe horizontal ( a savoir l'un tout à gauche et l'un tout à droite, ) mais sur la même ligne, celle du haut.
j'ai essayé d'ajouter un align_item: flex_end; qui fait le même effet mais sur la ligne du bas
Un vertical_align: baseline; ou bottom; n'ont aucun effet
Le flex wrap non plus, puisque les éléments ont largement assez de place... ?
etc etc, bref, je n'y arrive pas, mais ça doit être possible non ? ou je ne prends pas le problème dans le bon sens ?


Merci pour votre aide.

[NoSmoking]

Bonjour,
regarde du côté de align-self: flex-start et align-self: flex-end sur les éléments.

La propriété align-self détermine comment aligner les éléments flexibles sur une même rangée. Elle surcharge la valeur de la propriété align-items.

[JijiSound]

merci cela fonctionne! Est ce la seule manière de faire cela ??

[NoSmoking]

Sur base d'une « boîte flexible » tu as les deux approches, row ou column, qui sont possibles.

Prenons la structure HTML suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<h1><code>flex-box-row</code></h1>
<div class="flex-box-row">
  <div class="item-gauche">Elément #1</div>
  <div class="item-droite">Elément #2</div>
</div>
<h1><code>flex-box-column</code></h1>
<div class="flex-box-column">
  <div class="item-gauche">Elément #1</div>
  <div class="item-droite">Elément #2</div>
</div>

appliquons maintenant le CSS ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
[class^="flex-box"] {
  display: flex;
  align-items: flex-start;
  margin: 1em;
  padding: .25em;
  border: 1px solid #F00;
}
.flex-box-row {
  flex-direction: row;
  justify-content: space-between;
  min-height: 14em;         /* valeur à ajuster */
}
.flex-box-column {
  flex-direction: column;
}
.item-gauche {
/*  align-self: flex-start; /* pas utile */
}
.item-droite {
  align-self: flex-end;
}
[class^="flex-box"] div {
  padding: 1em;
  min-height: 5em;
  border: 1px solid #00F;
  background-color: #FF0;
}

on obtiendra à pouillème près ce que tu nous montres mais il ressort que de passer par une class="flex-box-column" à moins de contrainte, pas de justify-content ni de min-height à déclarer, et sans effets indésirables pouvant apparaître au redimensionnement de la fenêtre.