web-dev-qa-db-fra.com

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

Je veux faire un div stick 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 ligne position: absolute, justify-content: center devient invalide. Sont-ils en conflit les uns avec les autres et quelle est la solution?

EDIT

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

EDIT

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

cssreact-nativeflexbox
56
Stanley Luo

Non, le positionnement absolu n'entre pas en conflit avec les conteneurs flexibles. Le fait de transformer un élément en conteneur Flex n’affecte que son modèle d’agencement interne, c’est-à-dire la manière dont son contenu est agencé. Le positionnement affecte l'élément lui-même et peut modifier son rôle extérieur dans la présentation du flux.

Cela signifie que

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

  • Si vous ajoutez le positionnement absolu à un élément avec display: flex, il sera redimensionné à l'aide de l'algorithme de réduction à l'ajustement (typique des conteneurs de niveau en ligne) au lieu de celui disponible en mode Remplissage.

Ceci dit, les conflits de positionnement absolus avec les enfants flexibles .

Comme il est hors du flux, un enfant d'un conteneur flexible positionné de manière absolue ne participe pas à la mise en page flexible.

61
Oriol

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>
21
Shivkumar kondi

Vous devez donner width:100% au parent pour center le 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 verticalement, donnez height:100% et align-itens: center

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