カード型のレイアウトを整えたい

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• カード型のレイアウトを整えたい

前提

カード型のレイアウトを作ってます。

発生している問題・エラーメッセージ

値段と薬の説明のところのflex-growがうまく効かなくて高さが合わない

該当のソースコード

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="left">
							<h5 class="highlighter yokuseizai_title">生物学的製剤</h5>
							<img src="../assets/images/new_med.jpg" alt="新薬のイメージ">
						</div>	
						<div class="am_flex">
							<div class="medicine">
								<img src="../assets/images/benrista.webp" alt="ベンリスタの写真" class="medicine_img">
								<div class="medicine_center">
									<p class="medicine_kind">生物学的製剤</p>
									<p>Belimumab<br><span class="medicine_name">ベンリスタ</span></p>
								</div>
								<div class="medicine_text_box">
									<p class="medicine_text">SLEの治療に使用される抗体医薬品で、Bリンパ球刺激因子（BLyS）を標的とします。注射薬。</p>
									<p class="price">16,616円/120mg１瓶</p>
								</div>
							</div>

							<div class="medicine">
								<img src="../assets/images/sanefro.webp" alt="サフネローの写真" class="medicine_img">
								<div class="medicine_center">
									<p class="medicine_kind">生物学的製剤</p>
									<p>Secukinumab<br><span class="medicine_name">サフネロー</span></p>
								</div>
								<div class="medicine_text_box">
									<p class="medicine_text">膿痂疹の治療に使用されることが一般的ですが、腎炎を伴うSLEの治療に特に効果があります。</p>
									<p class="price">300mg2ml1瓶<br>96,068円
										</p>
								</div>
							</div>

							<div class="medicine">
								<img src="../assets/images/ritukisimab.webp" alt="リツキシマブの写真" class="medicine_img">
								<div class="medicine_center">
									<p class="medicine_kind">生物学的製剤</p>
									<p>Rituximab<br><span class="medicine_name">リツキシマブ</span></p>
								</div>
								<div class="medicine_text_box">
									<p class="medicine_text">SLEの治療に使用されるモノクローナル抗体医薬品で、B細胞を標的とします。注射薬。</p>
									<p class="price">21,609円<br>100mg10ml1瓶</p>
								</div>
							</div>
							<div class="medicine">
								<img src="../assets/images/akutemura.webp" alt="アクテムラの写真" class="medicine_img">
								<div class="medicine_center">
									<p class="medicine_kind">生物学的製剤</p>
									<p><span class="medicine_name">アクテムラ</span></p>
								</div>
								<div class="medicine_text_box">
									<p class="medicine_text">注射薬。炎症を抑制する、細胞障害を抑制、病気の進行を遅らせる</p>
									<p class="price">32608円／キット</p>
								</div>
							</div>
						</div>

.am_flex {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 2%;
}
.medicine {
  display: flex;
  flex-direction: column;
  width: 23%;
  margin-bottom: 25px;
}
.medicine_img {
  width: 100%;
  height: 200px;
  border-radius: 20px 20px 0 0;
}
.medicine_center {
  background-color: #E2B2A9;
  padding: 10px;
  width: 100%;
  height: 120px;
}
.medicine_kind {
  margin: 0;
}
.medicine_name {
  font-weight: bold;
  font-size: 18px;
}
.medicine_text_box {
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  border: 3px solid #E2B2A9;
  border-radius: 0 0 20px 20px;
}
.medicine_text {
  text-align: left;
  flex-grow: 3;
}
.price {
  margin: 0;
  flex-grow: 1;
}

試したこと

medicine_text_boxにdisplay:flexを指定して
medicine_textと.priceにflex-growを指定した。

Answer 1

値段と薬の説明のところのflex-growがうまく効かなくて高さが合わない

flex-growの設定は効いているとは思いますが、flex-grow: 3; と flex-grow: 1;に設定しているのでどちらも拡張してしまうので中身のテキスト量によって高さが合わなくなります。値段(.price)の方はflex-grow: 0;で拡張しないようにすればどうでしょう。

あと、.medicine_text_box の高さを200pxに固定しているので、テキスト量や画面幅によってはみ出してしまう可能性がありますのでこれは固定しないようにした方がいいでしょう。代わりに、これにflex-grow: 1;を設定して親要素の高さいっぱいまで拡張するようにするといいでしょう。

その他、気になったところを修正したのが下記のCSSです。修正箇所は修正理由はコメントにしてあります。

.am_flex {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 2%;
}
.medicine {
  display: flex;
  flex-direction: column;
  width: 23%;
  margin-bottom: 25px;
}
.medicine_img {
  width: 100%;
  height: 200px;
  border-radius: 20px 20px 0 0;
 object-fit: cover; /* 画像の変形を防ぐ */
}
.medicine_center {
  background-color: #E2B2A9;
  padding: 10px;
/*  width: 100%; 削除 親要素をpadding分はみ出すのを防ぐため */
  height: 120px;
}
.medicine_kind {
  margin: 0;
}
.medicine_name {
  font-weight: bold;
  font-size: 18px;
}
.medicine_text_box {
  padding: 10px;
 /* height: 200px; 高さは固定しない */
  flex-grow: 1; /* 下に余白がでないように高さを拡張する */
  display: flex;
  flex-direction: column;
  border: 3px solid #E2B2A9;
  border-radius: 0 0 20px 20px;
}
.medicine_text {
  text-align: left;
  flex-grow: 1; /* 高さを拡張する */
}
.price {
  margin: 0; /* 高さを拡張しない */
}

Answer 2

flex-growは使用せず、gapを使用した方がよいかもしれません。
2，3番目の値段箇所が改行されており、1，4番目と一緒に扱うのは難しいと思われます。
htmlを変更できないのでしたら、

私の場合flex-growは削除して、

• .medicineにgapプロパティを追加して調整する。

もしくは、

• .medicineにフレックスボックスを使用せず、.priceにmargin-topを追加して調整する。

とします。参考になればと思います。

Answer 3

Your article's content seems to pique the interest of quite a few readers, and I must say that I am quite impressed with your post. I am looking forward to reading more of your excellent articles. run 3