web-dev-qa-db-fra.com

Donner un espacement vertical aux objets enveloppés dans la flexbox

J'ai récemment joué avec Flexbox pour la première fois et, en général, c'est absolument incroyable. J'ai récemment rencontré un problème où je n'arrive pas à donner des éléments flexibles enveloppant un espacement vertical.

J'ai essayé d'utiliser:

align-content: space-between;

mais cela ne semble rien faire. De la lecture que j’ai faite, cela ne semblerait fonctionner que si mon conteneur Flex est plus grand que les éléments qu’il contient (est-ce exact?) semblerait vaincre le but d'utiliser flexbox?

La seule façon dont je peux penser à faire ce travail serait de donner une marge inférieure aux éléments qu’il contient, mais là encore, cela semble aller à l’encontre du but recherché.

J'espère qu'il me manque quelque chose d'assez évident - voici un lien vers un code: http://codepen.io/lordchancellor/pen/pgMEPz

Aussi, voici mon code:

HTML:

<div class="container">
   <div class="col-sm-12">
     <h1>Flexbox Wrapping</h1>

     <div class="flexContainer">
       <div class="flexLabel">This is a flex label</div>

       <a class="btn btn-primary">Button 1</a>
       <a class="btn btn-warning">Button 2</a>
       <a class="btn btn-success">Button 3</a>
     </div>
   </div>
 </div>

CSS:

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  justify-content: center;
}
.flexContainer .flexLabel {
  flex-basis: 150px;
  flex-shrink: 0;
}

EDIT - Je vais juste ajouter un peu plus de détails ici, car je ne suis pas sûr d’en parler assez bien.

Dans mon projet plus grand, certains éléments de niveau bloc sont rangés à l’aide de flexbox. Cependant, il doit y avoir une certaine réactivité, car l'utilisateur peut réduire la largeur de l'écran. À ce stade, je veux que mes éléments commencent à s'empiler (d'où le wrap). Cependant, au fur et à mesure que les éléments commencent à s'empiler, ils se touchent tous verticalement, là où je veux qu'il y ait de l'espacement.

Cela commence à ressembler aux marges supérieure et inférieure est peut-être le seul moyen de résoudre ce problème - cependant je me demandais s'il existait un moyen centré sur la flexbox pour y parvenir.

htmlcssflexbox
24
lordchancellor

Si vous forcez l’enveloppement en appliquant une largeur, vous pouvez utiliser les marges comme vous le feriez normalement sans définir de hauteur.

.flexContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: pink;
  width: 150px;
}
.flexContainer > * {
  margin: 1em 0;
}
.flexContainer .flexLabel {
  flex-basis: 150px;
  flex-shrink: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-sm-12">
    <h1>Flexbox Wrapping</h1>

    <div class="flexContainer">

      <div class="flexLabel">This is a flex label</div>

      <a class="btn btn-primary">Button 1</a>
      <a class="btn btn-warning">Button 2</a>
      <a class="btn btn-success">Button 3</a>
    </div>

  </div>
</div>

11
Paulie_D

J'ai eu un problème similaire et j'ai utilisé le hack suivant pour résoudre le problème.

    /* add a negative top-margin to the flex container */
.flexContainer {
        /* ... your existing flex container styles here */
    margin: -10px 0 0 0;
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
    margin-top: 10px;
}

Pour la rangée supérieure d'éléments flexibles, les marges négatives et positives s'annulent, pour les rangées suivantes, la marge entre les rangées (ici 10px entre les rangées).

Il est moins qu'élégant, mais il fait le travail.

16
JRulle

C'est parce que vous n'avez pas la hauteur sur votre contenu flex pour qu'il calcule l'espace entre les deux. Le conteneur flex est donc aussi petit que possible. Ajoutez une hauteur et ça devrait marcher.

5
tenor528

Une autre solution consiste à donner à l’article une bordure inférieure:

border-bottom: 10px solid transparent;
0
Zohar