伊藤商店

伊藤商店の覚書

flexで子要素の高さ（背景）を揃える

css・scss

いつも忘れるflexで孫要素を高さ（背景）を揃える方法。

HTML例

<div class="item_list">
  <div class="item">
    <figure><img src="aaa.jpg"></figure>
    <h3>タイトル1</h3>
    <p>テキストテキストテキストテキスト</p>
  </div>
  <div class="item">
    <figure><img src="aaa.jpg"></figure>
    <h3>タイトル2</h3>
    <p>テキストテキストテキストテキスト</p>
  </div>
</div>

SCSS

.item_list{
  display: flex;
  justify-content: space-between;
  item{
    display: flex;
    flex-direction: column;
    figure{
       margin-bottom: 10px;
    }
  }
}

孫要素の位置を揃えるのはまた後ほど。

一覧へ