ReactJS : diviser l'écran en deux moitiés

Question

Comment puis-je diviser l'écran en deux moitiés, par exemple : afin de pouvoir ajouter mes éléments personnalisés dans chaque moitié ?

Exemple : le côté bleu est une image, la seconde moitié contient des entrées de texte aléatoires.

J'ai essayé comme ça :

<div className={styles.splitScreen}>
        <div className={styles.topPane}>
          {topPane}
        </div>
        <div className={styles.bottomPane}>
          {bottomPane}
        </div>
      </div>

avec un fichier scss contenant :

.splitScreen {
  position: relative;
  height: 100vh;

  .topPane,
  .bottomPane {
    position: relative;
    width: 100%;
    height: 50%;
  }

  .topPane {
    transform: rotate(180deg);
  }
}

mais sans succès.

Answer 1

Cela ressemble à un bon cas d'utilisation de CSS flexbox. CSS FLEXBOX

<div className={styles.splitScreen}>
  <div className={styles.topPane}>{topPane}</div>
  <div className={styles.bottomPane}>{bottomPane}</div>
</div>

objets de style :

splitScreen: {
    display: 'flex';
    flexDirection: 'row';
},
topPane: {
    width: '50%',
},
bottomPane: {
    width: '50%',
},

EDIT : Si elles doivent être côte à côte, utilisez flexDirection: 'row', .

Answer 2

Il semble que vous vouliez une boîte flexible ou une grille css.

Puisqu'il y a déjà une réponse pour flexbox de iepur1lla, voici une alternative css-grid ;

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

Et si vous voulez être sûr que topPane et bottomPane sont toujours dans ces deux positions, vous pouvez ajouter ceci à la CSS :

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }