web-dev-qa-db-fra.com

Comment centrer verticalement le contenu d'un élément de flexbox

J'essaie de centrer le contenu d'un élément de boîte flexible en utilisant justify-content:stretch; Il semble que l'ancienne astuce consistant à utiliser display:table-cell;vertical-align:middle; ne fonctionne pas dans cette situation. Qu'est-ce que

.flex-container {
    display:flex;
    align-items:center;
    justify-content:stretch;
}
.flex-item {
    align-self:stretch;
}

<div class="flex-container">
    <div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>

AVANT DE RÉPONDRE: / Il semble y avoir beaucoup de confusion sur ce que je demande. J'essaie de centrer leCONTENUde l'élément flex. Avec justify-content:stretch, la hauteur de l'élément s'étire sur toute la hauteur du conteneur, mais le contenu de l'élément flotte vers le haut (au moins sous Chrome).

"Une image vaut mieux que mille mots." (A) est ce que j'ai déjà. (B) est ce que je veux .enter image description here

htmlcsscss3vertical-alignmentflexbox
23
emersonthis

Pour ce faire, vous pouvez utiliser display chaque élément flexible en tant que conteneur flex, puis en alignant le contenu verticalement à l'aide de la propriété align-items, comme suit:

.flex-container {
  display:flex;
  align-items:center;
  height: 200px; /* for demo */
}

.flex-item {
  align-self:stretch;
  display:flex;
  align-items:center;
  background-color: gold; /* for demo */
}
<div class="flex-container">
    <div class="flex-item">
      I want to be vertically centered!
      <s>But I'm not.</s>
  </div>
</div>

De plus, si vous omettez la déclaration align-items:center; du .flex-container, vous pouvez également supprimer en toute sécurité align-self:stretch; des éléments flexibles.

55
Hashem Qolami

Je ne sais pas si j'interprète correctement votre demande, mais je pense que vous essayez d'utiliser "justification-contenu: stretch;" quand vous devriez utiliser flex-grow.

Je suis mon échantillon, j'ai utilisé flex: 1 auto; ce qui est juste un raccourci pour définir quelques propriétés de flex.

HTML:

<div class="flex-container">
    <div class="flex-item">I'm top dog!
    </div>
    <div class="flex-item flex-center">
        I want to be vertically centered! And I am!
    </div>
</div>

CSS:

*{
    box-sizing:border-box;
    padding:5px;
}
.flex-container {
    border: 1px solid;
    display:flex;
    align-items:center;
    height: 100px;
}
.flex-item {
    flex: 1 auto;
    border: 1px solid green;
    height:100%;
    display:flex;
    justify-content:center;
}
.flex-center {
    align-items: center;
}

http://jsfiddle.net/p28tjskq/

Propriété Flex:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex

0
chris