Comment empêcher le contenu de re-dimensionnement d'un flex article?

Je suis en utilisant le CSS flexbox pour construire une évolutif, adapté de la grille. Lors de l'application Google graphique à l'un des flexbox éléments, l'élément change de taille très légèrement. Il suffit de jeter la grille de l'alignement. J'ai mis en place les images suivantes pour aider à illustrer le problème.

Flexbox grille avant l'application Google graphique à l'article 6:

Flexbox grille après l'application de Google graphique à l'article 6:

Comment empêcher le contenu de re-dimensionnement d'un flex article?

La Flexbox grille des charges plus rapide que Google graphique, de sorte que la grille à l'origine se charge correctement. Toutefois, lorsque le tableau des charges, l'article 6 s'élargit légèrement, provoquant image 2 ci-dessus.

La colonne du milieu flex conteneur et à l'article 6 de la div sont le programme d'installation en css comme suit:

#middlecolumn {
    width: 75%;
    height: 100%;
    display: flex;
    flex-flow: column;
    margin: 0.25%;
}

#item6_div {
    flex: 3;
    margin-top: 0.8vh;
}

Noter que les articles 5 et 7 sont configurés de la même manière dans le css, avec flex valeurs de 1. I. e. le point 6 est 3 fois la hauteur des articles 5 et 7. Ainsi, lorsque l'article 6 redimensionne, le ratio de 3:1 est maintenu.

Il y a une chose qui me manque dans le css pour éviter le Google chart de redimensionner sa flexbox conteneur de l'élément?

OriginalL'auteur jars121 | 2016-03-28

9

Quand vous dites à un flex élément à flex: 3 (Article 6) ou flex: 1 (Articles 5 & 7), voici comment abréviation de la propriété se décompose:
```
flex: ?  =  <flex-grow>, <flex-shrink>, <flex-basis>

flex: 3 =  flex-grow: 3, flex-shrink: 1, flex-basis: 0

flex: 1 =  flex-grow: 1, flex-shrink: 1, flex-basis: 0
```
Dans les deux cas, la flex-shrink facteur est de 1, le sens de la flexion de l'élément est autorisé pour réduire proportionnellement.

Pour empêcher la flexion des éléments de réduction, qui peuvent être la cause du défaut d'alignement, je voudrais changer les flex-shrink à 0.

Au lieu de flex: 3 et flex: 1 essayer:
```
flex: 3 0 0;
flex: 1 0 0;
```
Plus de détails dans la flexbox spec: 7.1.1. Valeurs de base de flex

Mais vous pouvez avoir un autre problème. Vous avez écrit:

Noter que les articles 5 et 7 sont configurés de la même manière dans le css, avec flex valeurs de 1. I. e. le point 6 est 3 fois la hauteur des articles 5 et 7. Ainsi, lorsque l'article 6 redimensionne, le ratio de 3:1 est maintenu.

Ce n'est pas la façon dont le flex-grow de la propriété des œuvres.

En appliquant flex-grow: 3 flex article en vous disant qu'elle consomme trois fois plus d'espace disponible que dans flex éléments avec flex-grow: 1. Cela ne signifie pas nécessairement le Point 6 sera trois fois la taille des Articles 5 et 7.

En savoir plus sur la façon flex-grow fonctionne ici: flex-grow pas de dimensionnement flex éléments comme prévu

Comme une alternative méthode de dimensionnement, vous pouvez utiliser le flex-basis de la propriété. Essayez flex: 0 0 60% sur le Point 6, et flex: 0 0 20% sur les Articles 5 et 7.

Merci pour ce que Michael, votre réponse à la fois ici et dans le fil relié a considérablement changé ma compréhension des différentes propriétés flex. Comme avec le fil relié, les marges, j'ai, entre la flex éléments est de jouer des ravages avec l'alignement, mais je pense que votre approche sera finalement me rendre là.

OriginalL'auteur Michael_B

Vous devez vous connecter pour publier un commentaire.