La «position: absolue» est-elle en conflit avec Flexbox?

Je veux faire un divbâton en haut de l'écran sans aucune influence sur les autres éléments, et son élément enfant au centre.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

Lorsque j'ajoute la position: absoluteligne, justify-content: centerdevient invalide. Sont-ils en conflit les uns avec les autres et quelle est la solution?

ÉDITER

Merci les gars, c'est le problème de la largeur des parents. Mais je suis dans React Native, donc je ne peux pas définir width: 100%. Essayé flex: 1et align-self: stretch, les deux ne fonctionnent pas. J'ai fini par utiliser Dimensions pour obtenir toute la largeur de la fenêtre et cela a fonctionné.

ÉDITER

À partir de la nouvelle version de React Native (je suis avec la 0.49), elle accepte width: 100%.

Non, le positionnement n'est absolument pas en conflit avec les conteneurs flexibles. Faire d'un élément un conteneur flexible affecte uniquement son modèle de disposition interne, c'est-à-dire la façon dont son contenu est présenté. Le positionnement affecte l'élément lui-même et peut modifier son rôle externe pour la disposition du flux.

Cela signifie que

• Si vous ajoutez un positionnement absolu à un élément avec display: inline-flex, il deviendra au niveau du bloc (comme display: flex), mais générera toujours un contexte de formatage flexible.

• Si vous ajoutez un positionnement absolu à un élément avec display: flex, il sera dimensionné à l'aide de l'algorithme shrink-to-fit (typique des conteneurs de niveau en ligne) au lieu de l'algorithme de remplissage disponible.

Cela dit, le positionnement absolu des conflits avec les enfants flexibles .

Comme il est hors flux, un enfant positionné de manière absolue d'un conteneur flex ne participe pas à la disposition flex.

vous avez oublié la largeur du parent

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Vous devez donner width:100%au parent centerle texte.

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Si vous devez également centrer l'alignement verticalement, donnez height:100%etalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

Dans mon cas, le problème était que j'avais un autre élément au centre de la div avec un z-index en conflit.

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>