Questions flex

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Je suis en train de me remettre au web à travers un projet personnel et j'aurais quelques petites questions sur ce code :

HTML :

 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
28
29
30
31
32
33
<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css"/>
    <title>SkThèque</title>
    
  </head>

  <body>

    <header>

    </header>
    
    <div class="container">
      <div id="contain-block-jvc" class="contain">Jeux vidéo</div>
      <div id="contain-block-fm" class="contain">Films</div>
      <div id="contain-block-sr" class="contain">Séries</div>
      <div id="contain-block-msq" class="contain">Musiques</div>
      <div id="contain-block-lvr" class="contain">Livres</div>
      <div id="contain-block-atr" class="contain">Autres</div>
    </div>
    
    <footer>

    </footer>

  </body>

</html>

CSS :

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.container
{
  font-size: 5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.contain:hover {
  font-size: 1.5em;
}

#contain-block-jvc
{
  background-color: #F2C430;
}

#contain-block-fm
{
  background-color: #73DE2C;
}

#contain-block-sr
{
  background-color: #40A497;
}

#contain-block-msq
{
  background-color: #DEDE2C;
}

#contain-block-lvr
{
  background-color: #A44097;
}

#contain-block-atr
{
  background-color: #B3B2B1;
}

Résultat :

Résultat.

Questions :

  • Pourquoi est-ce que les contains ne sont pas centrés verticalement alors que j'utilise bien align-items avec center pour spécifier un alignement centré sur l'axe secondaire, donc vertical ici ?
  • J'aimerais que les lignes de vignettes fassent la même taille en largeur, quelle est la solution (indiquer une taille fixe à contain, passer par un tableau, …) ?
  • Par ailleurs, j'ai remarqué que le font-size pour le hover a un rôle de coefficient vis à vis de la taille spécifiée (en passant la souris, la taille sera 1.5em*5em), est-ce possible de contourner cela en indiquant juste la nouvelle taille ?

(comme vous pouvez le remarquez, un morceau du 'J' de Jeux vidéos doit sortir de la boite vu qu'il n'est pas pris en compte par le background, je vais rajouter un padding sur contain pour corriger cela).

Merci d'avance. :)

Édité par Smokiev

Cette réponse a aidé l'auteur du sujet

Le résultat en live : https://jsfiddle.net/svhxtao6/

Maintenant, sur la première question, il me semble que les éléments sont parfaitement centrés dans le parent, le but de flexbox est de centrer par rapport à l’élément parent, non par rapport à la page, si tu désire un centrage vertical sur la page, il te faudra sûrement quelque chose comme un .container { height: 100% }.

Sur la seconde question, le plus simple serait effectivement de passer une taille fixe à chaque .contain, mais une autre solution consisterait à faire un "flex: 1" sur .contain, afin que les éléments se répartissent la largeur disponible, mais on perds alors la modularité, chaque élément aura la même taille, ça peut créer des décalages du texte, parfois.

Enfin, l'unité em a été créée exactement pour ça. Pour donner une taille de texte en revenant au body, il faut utiliser rem.

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0

Cette réponse a aidé l'auteur du sujet

Il faut pas oublier d'appliquer le height: 100% sur le body aussi, sinon, ça ne fonctionne pas. Tu peux le voir si tu regardes la tailles de tes éléments avec le debug tool.

Édité par tleb

It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self-critical? – Perlis

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte