Est-ce que 'position: absolute' est en conflit avec flexbox?

Question

Je veux faire une div à coller sur le haut de l'écran, sans aucune influence à d'autres éléments, et son enfant de l'élément dans le centre.

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

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

Quand j'ajoute de l' position: absolute ligne, justify-content: center devient non valide. Faire, ils entrent en conflit les uns avec les autres et, quelle est la solution?

MODIFIER

Merci les gars c'est le problème du parent largeur. Mais je ne suis réagir native, donc je ne peux pas définir width: 100%. Tenté flex: 1 et align-self: stretch, les deux ne fonctionne pas. J'ai fini par utiliser les Dimensions pour obtenir la totalité de la largeur de la fenêtre et il a travaillé.

MODIFIER

Que de la version la plus récente de Réagir Natif (je suis avec 0.49), il accepte width: 100%.

Answer 1

Non, absolument positionnement ne sont pas en conflit avec un flex de conteneurs. Fabrication d'un élément d'un conteneur flex n'affecte que la partie intérieure, modèle de mise en page, qui se, la manière dont son contenu sont fixés. Positionnement affecte l'élément lui-même, et peut modifier de l'extérieur de rôle pour la disposition de flux.

Cela signifie que

• Si vous ajoutez un positionnement absolu à un élément avec l' display: inline-flex, il sera de niveau bloc (comme display: flex), mais encore générer un flex de formatage contexte.

• Si vous ajoutez un positionnement absolu à un élément avec l' display: flex, il sera de taille moyenne à l'aide de l'shrink-to-fit algorithme (typique de inline-niveau de conteneurs) au lieu de le remplir à la vente.

Cela dit, absolument positionnement des conflits avec flex enfants.

Comme il est hors de flux, un positionnement absolu enfant d'un flex conteneur de ne pas participer à flex de mise en page.

Answer 2

tu as oublié la largeur du parent

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

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

Answer 3

Vous devez donner des width:100% des parents d' center le texte.

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

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

Si vous avez également besoin de centre d'aligner verticalement, donnez - height:100% et align-itens: center

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