web-dev-qa-db-fra.com

Centrer verticalement les éléments avec flexbox

J'essaie de centrer verticalement les éléments avec la flexbox CSS; et, je sais comment le faire avec le code non préfixé par le fournisseur, mais même avec les préfixes du fournisseur, je ne peux pas le faire fonctionner dans Webkit (Chrome).

J'essaie d'aligner verticalement les portées dans #trigger.

Voici mon CSS:

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

Des idées sur ce que je fais mal?

Et si vous connaissez les autres préfixes/versions des propriétés des propriétés que j'utilise, n'hésitez pas à les partager afin que cela puisse fonctionner dans plus que Webkit.

csscss3flexbox
24
IMUXIxD

Le align-items la propriété est pour les conteneurs flexibles (éléments avec display: flex appliqué à eux), pas éléments flexibles (enfants de conteneurs flexibles ). L'ancienne spécification de 2009 n'a pas de propriété comparable à align-items; le box-align la propriété de 2009 correspond à align-content de la spécification standard.

http://jsfiddle.net/mnM5j/2/

#trigger {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  height: 10em;
  background: yellow;
}

<div id="trigger">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.</span>
</div>
41
cimmanon

Une mise en page alignée verticalement peut être obtenue avec les propriétés suivantes, veuillez noter que cela utilise l'ancienne syntaxe, bien que j'ai testé sur les dernières versions de Chrome, Firefox et Firefox Aurora -

#trigger {
  width: 200px;
  height: 200px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

#trigger span {
  display: block;
}

box-orient spécifie comment les enfants de la boîte doivent être alignés, ce qui dans notre cas est vertical.

box-pack aligne les enfants le long de l'axe de la boîte.

box-align aligne les enfants à l'intérieur de la boîte, son axe est perpendiculaire à l'axe de la boîte, c'est-à-dire que dans notre cas puisque l'orientation de la boîte est verticale, il décidera de l'alignement horizontal des enfants.

Voici une démonstration de Codepen , les propriétés que j'ai appliquées sur des éléments span autres que display: block sont purement à des fins esthétiques.

9
Vishu