3
votes

Flexbox itérant à trois colonnes

J'ai un composant dans react que je, itérant dans une boucle. Ce composant sera toujours affiché trois fois et je veux qu'ils s'affichent sur une seule ligne (chaque composant une colonne). Les exemples que j'ai vus ajoutent manuellement "flex: 1;" etc. le tout dans une seule ligne (chacun va être une colonne).

J'ai essayé:

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

Ne fonctionne pas. Avez-vous de l'aide?

reactjs html css flexbox

2 commentaires

Le flex-wrap: wrap ferait passer votre ligne d'une ligne à plusieurs si le contenu ne peut pas s'asseoir l'un à côté de l'autre. Essayez de supprimer cela?

Avez-vous essayé d'utiliser float: left ?

3 Réponses :

1
votes

Essayez d'utiliser flex-grow: 1 sur les colonnes enfants. Cela indique aux enfants de grandir de manière égale pour remplir la largeur de leurs parents.

Pour plus d'informations sur flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Voici un exemple simple de 3 colonnes, où chacun la colonne se développe également.

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

.parent {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col {
   flex-grow: 1;
   height: 200px;
   border: 1px solid black;
}

0 commentaires

1
votes

Vous pouvez supprimer le flex-wrap pour laisser tous les éléments flex sur la même ligne et donner à chaque élément flex un tiers de la largeur.

Exemple strong >

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

.grid {
  display: flex;
}

.grid-item {
  width: 33.33333%;
  height: 200px;
}
.item-1 {
  background-color: red;
}
.item-2 {
  background-color: green;
}
.item-3 {
  background-color: blue;
}

function App() {
  return (
    <div className="grid">
      <div className="grid-item item-1">Foo</div>
      <div className="grid-item item-2">Bar</div>
      <div className="grid-item item-3">Baz</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

Voici ce que vous essayez probablement d'accomplir:

<div class="grid">
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
  <div class="grid-item">Item content</div>
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
}

.grid-item {
  width: 30%;
}

Le conteneur Flex enveloppera chaque élément, une fois qu'il sortira de ses limites avec la propriété flex-wrap: wrap; .

Et chaque élément à l'intérieur du flex doit alors être défini sur width: 30%; . Chaque 4e élément de la grille sera renvoyé à la ligne suivante.

0 commentaires