Flex / Chrome bug ?

AlexJM
Les bases HTML/CSS

Bonjour,

J'utilise les FlexBox pour faire ma topbar. Elle se constitue en 3 parties : 2 liens, mon logo, 2 liens

Or j'ai besoin que mes 2 liens prennent le plus de place possible, et que mon logo ait sa taille la plus petite possible pour ne pas laisser de vides
J'ai tenté de jouer avec les flex sur les enfants mais j'ai un bug assez étonnant :

https://i.gyazo.com/cccf64c495ee0f367809da3b2f55b9f0.mp4

Comme s'il avait besoin de réactualiser pour prendre en compte...

Quelqu'un a-t-il déjà eu se bug et saurait comment le régler ?

Merci d'avance !

2 réponses

AlexJM
Auteur
Réponse acceptée

Je crois avoir compris le bug, en faite c'était mon logo qui était une grande image, et je changeais sa hauteur donc le navigateur changeait sa largeur. Du coup, au moment ou je charge la page, le logo est grand et petit après, mais quand je rafraichis la règle de style, il recalcule avec la nouvelle taille du logo... Les joies de l'adaptation de designs

PhiSyX

Yop.

Aucune idée de ce que tu as mis comme règles CSS sur tes autres éléments, mais effectivement le comportement est assez bizarre sur ta vidéo.
Ceci étant dit, j'ai essayé de reproduire ton bug de mon côté mais je n'ai pas réussi.

Avec ce CSS: [sommaire]

header { 
  display: flex;

  align-items: center;
}
header nav {
  display: flex;

  flex: 1 1 0%;
}
header nav a {
  flex: 1 1 0%;

  text-align: center;

  border: 1px solid;
  background-color: red;
}

header a {
  /* flex: 1 1 0%; */
  padding: .75rem;
}