web-dev-qa-db-fra.com

Faire en sorte que flex enfant ait la même hauteur que le parent dans la colonne de grille

J'essaie de construire un tableau de prix où chaque colonne contient une carte. Je veux que toutes les cartes s'étendent à la hauteur de leurs éléments parents (.col). 

Remarque: J'utilise Bootstrap 4 et j'essaie de réaliser cela avec le système de grille existant (par souci de cohérence) et avec ce balisage particulier. Je ne parviens pas à faire en sorte que les cartes atteignent la hauteur de leurs conteneurs parents. Est-ce même possible avec le balisage actuel?

Le balisage de base est le suivant:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

Voici mon stylo: https://codepen.io/anon/pen/oZXWJB

 enter image description here

htmlcsstwitter-bootstrapflexbox
7
JCraine

Ajoutez flex-grow : 1; à votre règle .card. Le balisage HTML est bon.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

Vous pouvez également consulter Foundation 6 Equalizer plugin. Ils utilisent JavaScript cependant.

3
Sumi Straessle

Ajoutez simplement flex: 1 à votre classe card. Devrait suffire. Et vous n'avez pas besoin de display: flex; align-items: stretch; flex-direction: column dans cette classe.

2
Marcin

Il vous suffit d'ajouter height: 100% sur .card 

.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  height: 100%;
}

D&EACUTE;MO

1
Nenad Vracar

Ajouter hauteur: 100% à .card 

.card {
  display: flex;
  height: 100%;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
}

exemple - https://codepen.io/anon/pen/zZGzyd

1
grinmax

Faites juste votre .cardheight à 100%. 

.card{
   height: 100%;
   display: flex;
   padding: 20px;
   background: #002732;
   color: white;
   opacity: 0.5;
   align-items: stretch;
   flex-direction: column;
}
0
Chaitali

Si vous utilisez Bootstrap 4, ils ont déjà des classes intégrées pour ce que vous essayez d’atteindre. 

Ajouter card-deck à <div class="row card-deck">

here's screenshot

0
Lana Kushnir