Questions flex

Le problème exposé dans ce sujet a été résolu.

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. :)

+0 -0

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.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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