web-dev-qa-db-fra.com

Contrôle la largeur des articles flexibles disposés verticalement dans un conteneur flexible

J'essaie d'obtenir l'effet où les cases étiquetées "DEMI" prennent seulement 50% de la largeur (c'est-à-dire qu'elles partagent la première rangée de façon égale).

L'exigence de base est qu'ils restent dans un seul conteneur. Est-ce possible de réaliser l'utilisation de flexbox?

J'ai essayé de jouer avec flex-grow, flex-shrink, et flex-basis mais je crains de ne pas comprendre comment le faire fonctionner, ou si c'est même possible, étant donné l'exigence d'un seul conteneur.

Considérez ce violon: http://jsfiddle.net/GyXxT/270/

div {
  border: 1px solid;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: column;
}
.child {
  
  height: 200px;
}
.child.half {
  flex: 1 1 10em;
  color: green;
}

.child:not(.half) {

  flex-shrink: 2;
  flex-basis: 50%;
  color: purple; 
}
<div class="container">
  <div class="child half">
    HALF
  </div>
  
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>
htmlcsscss3flexboxword-wrap
14
parliament

Au lieu de flex-direction: column, vous pouvez essayer un wrapping flexbox using flex-wrap: wrap; et vous pouvez définir:

  1. flex-basis: 50% pour les divs demi-largeur

  2. flex-basis: 100% pour les divs pleine largeur

Voyez que j'ai jeté box-sizing: border-box pour ajuster les largeurs lors de l'utilisation de flex-base.

Voir la démo ci-dessous:

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}
<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>
14
kukkuz

Les propriétés de dimensionnement flexible - flex-grow, flex-shrink, flex-basis et flex - fonctionnent uniquement le long de axe principal du conteneur flexible.

Puisque votre conteneur est flex-direction: column, l'axe principal est vertical et ces propriétés contrôlent la hauteur et non la largeur.

Pour dimensionner des éléments flexibles horizontalement dans un conteneur de direction de colonne, vous aurez besoin de la propriété width.

(Voici une explication plus détaillée: Quelles sont les différences entre flex-base et largeur? )

Pour réaliser votre mise en page avec un seul conteneur, voir ne autre réponse à cette question .

Si vous souhaitez rester dans la direction des colonnes, vous devrez envelopper le .half éléments dans leur propre conteneur.

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: green;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}
<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>
6
Michael_B

L'exigence de base est qu'ils restent dans un seul conteneur.

Cela peut aussi se faire sans flexbox, en faisant simplement flotter les 2 half éléments

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
}
.child {
  height: 200px;
}
.child.half {
  float: left;
  width: 50%;
  color: green;
}
.child:not(.half) {
  width: 100%;
  color: purple; 
}
<div class="container">
  <div class="child half">
    HALF
  </div> 
  <div class="child half">
    HALF
  </div>
  
   <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
   <div class="child">
    FULL
  </div>
</div>
3
LGSon