display flexを利用しています。
ある要素(上画像、下テキスト)が3つ並んでいます。
テキストがレスポンシブになり幅が変わると高さが変わってしまいます。
align-item: stretchを利用しても、すでに画像があるからか、孫要素があるからかうまくいきませんでした。
ブログなどのボックスで記事の長さが変わっても高さを一定にする方法はありますか?
「高さ 可変 一定にしたい」「display flex 高さ 一定にする」
などで検索したのですがいまいち答えが見つからず。。。お願いいたします。
html
1 <div class="news-items"> 2 <div class="news-item flex-1" href="#"> 3 <img src="/img/news-1@2x.png" alt="" class="news-img"> 4 <div class="news-text"> 5 <p class="news-date">2019.9.30</p> 6 <p class="news-title">「完全版マハーバーラタ」2020年7月・東京公演!!</p> 7 </div> 8 </div> 9 <div href="#" class="news-item flex-1"> 10 <img src="/img/news-2@2x.png" alt="" class="news-img"> 11 <div class="news-text"> 12 <p class="news-date">2019.9.30</p> 13 <p class="news-title">ニュースのタイトルが入ります。ニュースのタイトルが入ります。</p> 14 </div> 15 16 </div> 17 <div href="#" class="news-item flex-1"> 18 19 <img src="/img/news-3@2x.png" alt="" class="news-img"> 20 <div class="news-text"> 21 <p class="news-date">2019.9.30</p> 22 <p class="news-title">ニュースのタイトルが入ります。ニュースのタイトルが入ります。</p> 23 </div> 24 25 </div> 26 <div href="#" class="news-item flex-2"> 27 <div class="news-flex"> 28 <img src="/img/news-2@2x.png" alt="" class="news-img"> 29 <div class="news-text"> 30 <p class="news-date">2019.9.30</p> 31 <p class="news-title">ニュースのタイトルが入ります。ニュースのタイトルが入ります。</p> 32 </div> 33 </div> 34 35 </div> 36</div>
css
1 2.news-items { 3 @include mq('md') { 4 display: flex; 5 flex-wrap: wrap; 6 align-items: stretch; 7 } 8 9 .news-item { 10 11 margin-bottom: 30px; 12 background-color: #fff; 13 color: #333333; 14 height: 100%; 15 16 17 18 19 20 .news-text { 21 padding: 14px 15px 25px 15px; 22 height: 100%; 23 background-color: #fff; 24 align-items: stretch; 25 justify-content: space-around; 26 27 28 29 .news-date { 30 font-size: 12px; 31 color: gray; 32 } 33 .news-title { 34 font-size: 16px; 35 } 36 } 37 }
回答1件
あなたの回答
tips
プレビュー