flexboxで配置した背景サムネイルに記事リンクをつけたい

Question

###前提・実現したいこと
flexboxを使用して、背景画像のサムネイルにアイキャッチ画像を表示させていますが、
このサムネイルに記事リンクをつけようとしたら、うまくいきませんでした。
###発生している問題・エラーメッセージ

<article class="loop-article">               
    <a href="<?php the_permalink(); //投稿（固定ページ）のリンクを取得 ?>">   

    <?php
        if(has_post_thumbnail()) {
              $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
                
        echo '<div class="thumbnail-box" style="background-image:url(<?php echo $image[0]; ?>);"></div>';
         }  
        else {    
        echo '<div class="thumbnail-box" style="background-image:url(' . get_template_directory_uri() . '/images/no-image.png);"></div>';
             }
    ?>           
   </a>
   <div class="text-box">
      <p>あいうえおかきくけこ</p>
   </div>
   </article>

articleにdisplay: flex;を使用しています。a要素をとればサムネイル画像は表示されますが、a要素を入れてしまうとサムネイルは消えてしまいます。(flexboxが機能しません)

sass・compassでは下記のように記述しています。

.loop-article{
              padding-bottom: 40px;
              @include display-flex();
                    
     .thumbnail-box{
               background-position: 50% 50%;
               background-repeat: no-repeat;
               background-size: cover;
               @include align-self(flex-start);
               @include flex-basis(45%);
               margin-right: 25px;
                    &:before{
                            content:'';
                            display: block;
                            padding-top: 60%;
                            @include box-sizing(border-box);
                        }
                        
                    }
                    .text-box{
                       }
                        
                    }
}

###補足情報(言語/FW/ツール等のバージョンなど)
今回はじめて、アイキャッチ画像をサムネイルの背景画像として設置したのですが、
サムネイルに記事へのリンクを張れなくて困っています。

Comments

[othersight]

CSSを見てみないと何とも言えないのですが、上記のHTMLに関連する部分だけでも追記可能でしょうか?

[goligo]

該当の箇所をsass・compassで記載したバージョンを追記致しました。

Answer 1

Flex コンテナの直接の子要素が、Flex アイテムとなりますが、それが変わってしまっているため、それ用のCSSを用意しないといけません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

今回の場合、flex-basis、align-self はFlexアイテムに適用するべきものですので、a要素にも用意してあげてください。

Comments

[goligo]

そーでしたか。リンクも貼っていただき、ありがとうございます！
今回の私のケースだと、あまりflexboxのメリットを活かせないようなので、floatで対応致しました。もっとボックス多い場合や高さを揃えたいときに利用しようと思います。

Answer 2

全てのarticle要素にa要素が入るならば、
a要素にdisplay: flex;を指定すれば表示されるかと思います。

Comments

[goligo]

可能であれば、サムネイルのところだけ、記事リンクを張りたいと思っております。

[chocoron]

aタグの閉じ位置を見間違えました。
a要素をブロック要素にしてはいかがでしょうか。

[chocoron]

度々失礼いたします。
align-selfやflex-basisはflexの子要素に指定するものなので、
孫要素（子孫要素）には効いてないかと思います。
.thombnail-boxに明確なサイズを与えてあげないと、
大きさが計算できていないと思います。

[goligo]

そーでしたか。それでは間にa要素があると、自分が実現したいことはflexboxだと難しそうですね。
了解しました。ご回答ありがとうございます！
今回はflexboxにはせず、floatで対応しようと思います。

[chocoron]

すでにfloatで解決されたようですが、
a要素をブロック要素にして、x_xさんのご回答のようにflex-basis、align-selfを設定してあげれば、
flexレイアウトも可能ですよ。
次の機会に使ってみてくださいね！

Answer 3

flexboxを使用し、サムネイルの背景として、アイキャッチ画像を設定した場合、サムネイルのみにa要素を付けるのはできなそうなので、flexboxを使用せず、floatで対処しました。

そうすれば、サムネイルは背景画像で表示され、さらにサムネイルのみに記事へのリンクを貼ることができました。

 .loop-article{//clearfix指定
            padding-bottom: 40px;
                    
                    
        .thumbnail-box{
              float: left;
              width: 45%;
              background-position: 50% 50%;
              background-repeat: no-repeat;
              background-size: cover;
              margin-right: 25px;
                     &:before{
                       content:'';
                       display: block;
                       padding-top: 60%;
                       @include box-sizing(border-box);
                        }
                        
         }
         .text-box{
                @include calc( width, '100% - 45% - 25px ');
                float: right;
          }
}