Meilleure pratique pour diviser la fenêtre d'affichage avec CSS flex

-1

En espérant que ce n'est pas une question absurde, car c'est un peu un peu particulier.Meilleure pratique pour diviser la fenêtre d'affichage avec CSS flex

Il est assez simple - je vise à produire une division de conception de la fenêtre/écran en deux moitiés rugueuses (60-40) à la verticale, semblable à la façon AirBnB faire: -

AirBnB New York

Est-ce aussi simple en utilisant des colonnes flexbox (j'utilise Bootstrap 4), en spécifiant les largeurs de colonnes et en définissant la colonne de droite à position: fixed?

Tout conseil que quelqu'un a serait le bienvenu car je n'ai jamais abordé ce type de design auparavant et je veux m'assurer que je ne néglige rien.

Source

2017-09-11 U4EA

Il est prévu que vous au moins essayer de coder vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

Bonjour. Merci pour votre réponse. J'accepte que je n'ai pas eu ma propre tentative de code à offrir, mais c'est parce que je ne sais tout simplement pas comment approcher la division du viewport du tout. J'ai fait des recherches sur Flex et je lui ai offert mes connaissances pour donner un scénario de la façon dont il serait abordé. Je ne veux certainement pas que d'autres personnes écrivent mon code pour moi car je ne suis pas un preneur de liberté et je n'apprendrais rien de copier et de coller. J'espérais recevoir des commentaires pour me diriger vers une solution que je pourrais coder moi-même. Mais je comprends votre opinion. – U4EA

Voici une solution de mise en page flex.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 

 
.box .row { 
 
    border: 1px dotted grey; 
 
} 
 

 
.box .row.header { 
 
    flex: 0 1 60vh; 
 
} 
 

 
.box .row.content { 
 
    flex: 1 1 40vh; 
 
}

<div class="box"> 
 
    <div class="row header"> 
 
    <p><b>header</b> 
 
     (60%)</p> 
 
    </div> 
 
    <div class="row content"> 
 
    <p> 
 
     <b>content</b> 
 
     (40%) 
 
    </p> 
 
    </div> 
 
</div>

Source

2017-09-11 20:58:26 jfeferman

Meilleure pratique pour diviser la fenêtre d'affichage avec CSS flex

Répondre

Questions connexes