cssのみでカード型レイアウトを作りたい。

お世話になります。
標題の件、下記画像のようにしたいです。
flexboxで試してみたところdisplay:flexの仕様で左右のカラムの高さは揃うのですが
その中の子要素のカードの部分の高さが揃いません。(画像のように横のラインを揃えたいです。)
高さを決め打ちする以外に方法があれば、ご教示いただければと思います。

Lhankor_Mhy

2017/12/15 10:31

ページの高さは固定ですか？成り行きですか？成り行きならば、何を基準に決まりますか？

Lhankor_Mhy

2017/12/15 10:32

画像を見る限り、カード間のマージンは固定ではなさそうですが、これは何で決まりますか？

karamarimo

2017/12/15 10:47

現状では2つの column の高さは同じだが各 column 内の一番下の要素の下端が揃ってないということですか？

退会済みユーザー

2017/12/15 14:37

＞Lhankor_Mhy様、karamarimo様。　説明が分かりづらく申し訳ありませんでした。sdmilieu様にご教示していただいたことが正に私がやりたかったことです。コメントありがとうございました！

s8_chu

2017/12/15 16:47

もし質問内容が解決したならば、ベストアンサーを選択して質問を解決済みにしてください。

行動規範の内容に同意します

回答1件

ベストアンサー

イメージされてるものかどうかわかりませんが、サンプルコードを書かせていただきました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Document</title>
8
9  <style>
10    * {
11      padding: 0;
12      margin: 0;
13    }
14
15    body {
16      padding: 100px;
17    }
18
19    .row {
20      display: flex;
21      width: 100%;
22    }
23    .col {
24      flex-basis: 50%;
25      display: flex;
26      flex-direction: column;
27    }
28    .col:not(:last-child) {
29      margin-right: 20px;
30    }
31    .card {
32      flex-grow: 1;
33      flex-shrink: 1;
34
35      width: 100%;
36      padding: 20px;
37      box-sizing: border-box;
38
39      box-shadow: rgba(0, 0, 0, .2) 1px 1px 5px;
40    }
41    .card:not(:last-child) {
42      margin-bottom: 20px;
43    }
44  </style>
45</head>
46<body>
47  <div class="row">
48    <div class="col">
49      <div class="card">Card1</div>
50      <div class="card">Card2</div>
51    </div>
52    <div class="col">
53      <div class="card">Card3</div>
54      <div class="card">Card4</div>
55      <div class="card">Card5</div>
56    </div>
57  </div>
58</body>
59</html>