web-dev-qa-db-ja.com

flexの子をグリッド列内の親の高さと等しくします

各列にカードが含まれる価格表を作成しようとしています。すべてのカードを親（.col）要素の高さまで引き伸ばしたい。

注：Bootstrap 4を使用し、既存のグリッドシステム（一貫性のため）とこの特定の部分でこれを達成しようとしています。 markup。親コンテナの高さまでカードを成長させることができません。これは現在のマークアップでも可能ですか？

基本的なマークアップは次のとおりです。

<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>

これが私のペンです。 https://codepen.io/anon/pen/oZXWJB

enter image description here

htmlcsstwitter-bootstrapflexbox
11
JCraine

追加 flex-grow : 1;あなたの.cardルール。 HTMLマークアップは問題ありません。

.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;
}

Foundation 6 Equalizer プラグインもご覧ください。ただし、JavaScriptを使用します。

6
Sumi Straessle

flex: 1をcardクラスに追加するだけです。十分なはずです。そして、このクラスではdisplay: flex; align-items: stretch; flex-direction: columnは必要ありません。

2
Marcin

height: 100%に.cardを追加するだけです

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

[〜＃〜] demo [〜＃〜]

2
Nenad Vracar

高さの追加：.cardに100％

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

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

1
grinmax

.cardheightから100％。

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

Bootstrap 4を使用している場合、彼らはすでにあなたが達成しようとしているもののための組み込みクラスを持っています。

追加 card-deckから<div class="row card-deck">

here's screenshot

0
Lana Kushnir