0
votes

Comment puis-je obtenir Flex pour travailler dans mon application de réaction?

En gros, j'ai deux divs de configuration et j'essaie d'utiliser Flex Box pour les dimensionner facilement afin qu'ils prennent tous les deux également la moitié de l'écran à l'aide de réagir. Pour une raison quelconque, ils se tournent comme ça.

vue

iv'e a essayé de réinstaller NPM mais cela n'a pas fonctionné du tout, et je Je suis sûr que ma syntaxe est tout à fait bien.

Ceci est mon app.css xxx

ceci est mon application.js xxx

javascript reactjs flexbox

0 commentaires

3 Réponses :

0
votes

Ils doivent fonctionner si vous supprimez flex-direction: colonne; - vous voulez réellement flex-direction: ligne; , qui est la valeur par défaut.



                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Cela n'a pas fonctionné, je veux que les divs se soient empiler les uns sur les autres et prennent et que chacun soit la moitié de la hauteur de l'écran.                                                
                                                
                                                                                            
                                                    Ah, j'ai complètement mal compris "afin qu'ils prennent également la moitié de l'écran à l'aide verticale à l'aide de réagir" - vous souhaitez définir la hauteur du conteneur parent à 100% de la hauteur de la fenêtre - vous pouvez utiliser  hauteur: 100vh;  pour cela


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Votre code est tout bien, il suffit de besoin d'ajouter  flex: 1 à la classe wrapper  forte>.
Vous pouvez en savoir plus sur Flex ici:  https: // css-astuces .Com / Snippets / CSS / A-Guide-Guide-to-Flexbox / 


<div class='wrapper'>

    <div class='nav'>
        <text>hey</text>
    </div>

    <div class='main'>
        <text>hey</text>
    </div>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous manquez le  flex: 1  code> interne dans la définition  .wrapper  code> CSS. La définition devrait ressembler à ceci:  xxx  pré> 
 avec  flex: 1  code> Vous dites à l'emballage d'utiliser tout l'espace disponible. Sinon, il suffit d'utiliser ce dont il a besoin, peu importe la hauteur.  P> 
 Voici l'ensemble du CSS:  P> 
.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.nav {
  background-color: red;
  flex: 1;
}

.main {
  background-color: blue;
  flex: 1;
}

                                

                                                                    
                                    
                                    
                                        2 commentaires
                                        
                                                                                            
                                                    Cela n'a pas fonctionné pour une raison quelconque, les DIV sont toujours de la même manière.                                                
                                                
                                                                                            
                                                    Cela fonctionne pour moi, voir ma sortie. J'ai juste collé tout le code CSS, juste au cas où. J'espère que vous pouvez le résoudre.