web-dev-qa-db-fra.com

conteneur fractionné verticalement dans Flexbox dans HALF

Quelqu'un peut-il dire comment je peux créer un conteneur right top et un conteneur right bottom afin qu'ils aient la même hauteur et que le conteneur rouge soit divisé à 50-50% verticalement. Peu importe le contenu à l'intérieur. J'ai essayé d'étirer le contenu et de le faire emballer tout en conservant flex-direction: row pour conserver la même hauteur pour les éléments, mais je suis perdu. 

Ce que j'attends: le conteneur right top croît de la même hauteur que right en bas, ce qui entraîne également la croissance automatique du conteneur left .  problem

C’est ce que j’ai jusqu’à présent: http://jsbin.com/rozoxoneki/edit?html,css,output

.flex{
  display: flex;
  border: 5px solid red;
  &-child{
    background: green;
    border: 2px solid yellow;
    flex: 1;
  }
}

.flex--vertical{
  flex-direction: row;
  flex-wrap: wrap;

  > .flex-child{
    min-width: 100%;
  }
}


<div class="flex">
  <div class="flex-child">
    left
  </div>
  <div class="flex-child flex flex--vertical">
    <div class="flex-child">
      <h1>right top</h1>
    </div>
    <div class="flex-child">
      <h1>right bottom</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
    </div>
  </div>
</div>
cssflexbox
11
zsitro

Intuitivement, on pourrait s’attendre à ce que cela fonctionne uniquement avec un flex-direction: column pour le conteneur principal et la hauteur du conteneur de gauche définie à 100%.

À la place, tous les navigateurs le font: (citation tirée d’une autre question stackoverflow )

Comment est-il possible que tous les principaux navigateurs utilisent le conteneur flex pour développer l'enveloppe dans le sens des lignes mais pas dans le sens des colonnes?

Donc, ce que vous pouvez faire, c'est emballer les deux bons conteneurs dans un nouveau:

Comme ce HTML - schéma:

<div class="main-container">
    <div class="left-container">Left container</div>
    <div class="right-container">
        <div class="half-containers">Top right</div>
        <div class="half-containers">Bottom right</div>
    </div>
</div>

Voici un jsfiddle comme exemple de style pour le résultat attendu.

Dans cet exemple, le conteneur principal est défini sur 50% de la largeur et 75% de la hauteur du corps.

11
michaPau

La réponse acceptée n'est pas idéale pour l'utilisation des propriétés flex, car tout peut être fait sans avoir besoin de min-height ou max-height

J'ai nettoyé le exemple fiddle et supprimé les styles css non essentiels pour indiquer les propriétés de flex utilisées ici.

Pour obtenir des divisions haut/bas espacées de manière égale, vous devez spécifier la valeur appropriée pour flex-basis ou laisser flex s'exercer de lui-même. En supposant que l'affichage du parent soit configuré pour être flexible avec une orientation de colonne, le style combiné flex peut nous y amener facilement:

.half-containers {
    flex: 1;
}

voir plus sur flex styling et le flex-basis property

5
Felipe

S'appuyant sur la réponse de Felipe, voici un exemple encore plus minimal de la division d'un conteneur Flex unique en deux dans le sens vertical. Chacun de ces styles s’est avéré important et nécessaire, à l’exception des deux en bas marqués optional.

(Ce qui m'a bien compris, c'est que chaque élément parent doit avoir un ensemble height: 100%, sinon tout se casse.)

HTML

<div id="container">
  <div class="row">This is the top.</div>
  <div class="row">This is the bottom.</div>
</div>

CSS

html, body {
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  flex: 1;
}

/* optional: get rid of body margin. makes look Nice. */
body {
  margin: 0;
}

/* optional: shade the bottom row */
.row:nth-child(2) {
  background: #bbb
}

CodePen de travail ici:

https://codepen.io/rbrtmrtn/pen/NyxeJE

0
Rob