web-dev-qa-db-fra.com

Flexbox et défilement vertical dans une application pleine hauteur à l'aide de NEWER flexbox api

Je souhaite utiliser une application complète utilisant flexbox. J'ai trouvé ce que je voulais en utilisant l'ancien flexbox (display: box; et autres choses encore)) dans ce lien: CSS3 Flexbox débordement

Ceci est une solution correcte pour l'ancienne version des propriétés flexbox css.

Si je veux essayer d'utiliser les propriétés plus récentes flexbox, j'essaierai d'utiliser la deuxième solution dans le même lien, mais en "piratant" flexbox en utilisant un conteneur de hauteur: 0px; Cela fait apparaître un défilement vertical.

Je ne l’aime pas beaucoup car il introduit d’autres problèmes et c’est plus un problème qu’une solution.

J'ai préparé un jsfiddle avec un exemple de base: http://jsfiddle.net/ch7n6/

#container {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    height: 100%;
}
#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: scroll;
}

C'est un "web html de pleine hauteur" et le pied de page se trouve en bas à cause de l'élément flexbox de l'élément de contenu. Je vous suggère de déplacer la barre entre le code css et le résultat pour simuler une hauteur différente .

htmlcsshtml5css3flexbox
71
José Cabo

Merci à https://stackoverflow.com/users/1652962/cimmanon qui m'a donné la réponse.

La solution consiste à définir une hauteur pour l’élément de défilement vertical. Par exemple:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

L'élément aura une hauteur car flexbox le recalcule sauf si vous souhaitez un min-height vous pouvez donc utiliser height: 100px; qu'il est identique à: min-height: 100px;

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

Donc, la meilleure solution si vous voulez un min-height dans le défilement vertical:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Si vous voulez juste faire défiler verticalement au cas où il n'y aurait pas assez d'espace pour voir l'article:

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Le code final: http://jsfiddle.net/ch7n6/867/

152
José Cabo

Editeur de spécifications Flexbox ici.

Ceci est une utilisation encouragée de flexbox, mais il y a quelques choses que vous devriez Tweak pour un meilleur comportement.

  • N'utilisez pas de préfixes. Unprefixed flexbox est bien pris en charge par la plupart des navigateurs. Commencez toujours par non préfixé et ajoutez uniquement des préfixes si nécessaire pour le prendre en charge.

  • Puisque votre en-tête et votre pied de page ne sont pas censés être flexibles, ils devraient tous les deux avoir flex: none; Défini sur eux. À l’heure actuelle, vous avez un comportement similaire en raison de certains effets qui se chevauchent, mais vous ne devriez pas vous y fier sauf si vous voulez vous confondre accidentellement par la suite. (La valeur par défaut est flex:0 1 auto. Ils commencent donc à leur hauteur automatique et peuvent diminuer mais ne pas croître, mais ils sont aussi overflow:visible Par défaut, ce qui déclenche leur prévention min-height:auto Par défaut. Si vous définissez un overflow sur eux, le comportement de min-height:auto change (passage à zéro plutôt qu'au contenu minimal) et ils vont soudainement se faire écraser par l'extra -tall élément <article>.)

  • Vous pouvez également simplifier le <article>flex - il suffit de définir flex: 1; Et vous serez prêt à partir. Essayez de vous en tenir aux valeurs communes dans https://drafts.csswg.org/css-flexbox/#flex-common sauf si vous avez une bonne raison de faire quelque chose de plus compliqué - elles sont plus faciles à lisez et couvrez la plupart des comportements que vous souhaitez invoquer.

54
Xanthir

La spécification actuelle dit ceci concernant flex: 1 1 auto:

Dimensionne l'élément en fonction des propriétés width/height, mais les rend totalement flexibles, de sorte qu'elles absorbent tout espace libre le long de l'axe principal. Si tous les éléments sont soit flex: auto, flex: initial, ou flex: none, tout espace libre positif après la taille des éléments sera distribué uniformément entre les éléments avec flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Il me semble que si vous dites qu'un élément mesure 100 pixels de haut, il est traité plus comme une taille "suggérée" et non comme une absolue. Puisqu'il est autorisé à se réduire et à croître, il prend autant de place qu'il le lui est permis. C'est pourquoi l'ajout de cette ligne à votre élément "main" fonctionne: height: 0 (ou tout autre numéro petit).

20
cimmanon