flex横並びで高さを揃える方法

Question

ホームページを自分で作っています。
初心者です。

flexでコンテンツを横並びにしたのですが高さが揃いません。
いろいろと自分なりに調べて試したのですがうまくいきません。

高さを揃える方法を教えてください。
よろしくお願いします。

【URL】
http://berryslife.com/onlinestore/seedling.shtml

【HTML】

<p style="font-size:medium;padding-top : 50px;margin-left : 15px;">名札ラベル・接木テープ</p> <div class="notice4" style="margin-top : 20px;"><a href="http://berryslife.com/onlinestore/seedling/sasiraberu.shtml"> <div class="notice-item4" style="border: 1px solid #edb195;border-radius: 5px;margin : 5px;padding: 10px;width: 230px;"> <img src="http://berryslife.com/officialsite/store/seedling/sasiraberu1.png" width="208" height="208"> <h4 style="font-size : 90%;line-height : 1.2;padding-left : 30px;">挿しラベル</h4> </div> </a><a href="http://berryslife.com/onlinestore/seedling/newmedel.shtml"> <div class="notice-item4" style="border: 1px solid #edb195;border-radius: 5px;margin : 5px;padding: 10px;width: 230px;"> <img src="http://berryslife.com/officialsite/store/seedling/newmedel.png" width="208" height="208"> <h4 style="font-size : 90%;line-height : 1.2;padding-left : 30px;">ニューメデール 25ｍｍ<br> 【ミシン目なし】</h4> </div> </a></div>

【CSS】
.notice4 {
display: flex;
flex-wrap: wrap;
}

Comments

[H40831]

高さを揃えるというのは、全て同じサイズにしたいという意味ですか？
それとも、上下の中間にポジショニングしたいという意味ですか？

[berrys]

要素の高さを一番高い要素に広げたいのです。
【名札ラベル・接木テープ】でいうと
挿しラベルの要素の高さをニューメデールの高さに揃えたいのです。

[H40831]

コードを書くときは、編集画面にあるcode機能を使うと読みやすくなりますよ。
回答に追記しました。

Answer 1

flexでnotice4の子要素の高さは揃っています。
問題なのはflexの子要素がaの時、その子要素であるdiv(class="notice4-item")の高さが揃っていないことです。
方法は色々あるのですが、一番わかり易いのは対象のaに対しても
display:flexを付与することです。

Comments

[berrys]

ありがとうございます。
子要素に
.notice-item4 {
display:flex;
}
と指定すると子要素の画像と文字が横並びになってレイアウトが崩れます。

code機能の使い方が良く分からなくて
すいません。

[macaron_xxx]

つけるところが違います。
.notice-item4は孫要素になっているものです。
aに対してflexを指定します。

[berrys]

下記の場合は
height:100%
を外すと外枠線が揃わなくなりました。
macaron_xxx さんがおっしゃっていた ↑ の
意味がわかりました。
aにflexを指定したら綺麗に揃いました。
すいませんでした。
どうもありがとうございました。

Answer 2

Flexboxのチートシート
こちらにできること書いてますご覧ください。

追記
とりあえず下記で縦サイズ揃いました。

.notice-item4{
    display: flex;
    flex-direction: column;
}
.notice-tem4 img{
    height: 100%;
}

画像の横サイズを変えたくない場合は、
img.notice-tem4のheightを消してflex-grow: 1;に書き換えてみてください。

追記
質問文が編集されて、HTMLの構造が違う話になってきたので要点だけ伝えますと、

1. display: flex; を指定すると 子要素の縦サイズは自動的に大きいものに合わせるモードになってます。
2. display: flex; を指定した要素の中身は display: flex; ではありません。（＝縦サイズを自動的に合わせてくれません。）
3. 全ての中身の要素を、きちんと縦サイズをあわせてくれるように display: flex; を指定したうえで、

画像に height: 100%; を書けば、ちゃんと合うとおもいます。
4. display: flex;にすると自動的に、中身をすべて横並びにしてしまうので、縦に並べたい部分には flex-direction: column; を書いてください。

Comments

[berrys]

ありがとうございます。
チートシートにある
align-self … （子要素の垂直方向の揃え） の
align-self: stretch;
を追加してみましたが揃いません。

試しに子要素に
.notice-item4 {
align-self: stretch;
}
と指定しましたが揃いません。

[berrys]

.notice-item4{
display: flex;
flex-direction: column;
}
img.notice-tem4{
height: 100%;
}

でやってみましたが揃いません。

HTMLに追記しました。
コンテンツの茶色の枠の高さが揃わないのです。

[H40831]

ごめんなさい、imgのセレクタ、全体的に間違えてました。
正しくは
.notice-item4 img{
...
}
です

[H40831]

HTMLの構造が変わったので、回答に追記をしました。

[berrys]

ありがとうございます。

.notice4 {
display: flex;
flex-wrap: wrap;
align-self: stretch;
}

.notice-item4 {
display: flex;
flex-direction: column;
height: 100%;
}

これでうまくいきました。
お手数をおかけしました。
どうもありがとうございました。

[macaron_xxx]

height:100%など不要なものが含まれていますが…。