css 画像 横並べ flexbox版

・テキストは左
・画像は右

こんな感じが完成

以下のようなcssにしたほうがいいね。

・画像をタップしたときに、画像だけ黒くならない

hoge.vue

        <a class="flex-box" href="//yahoo.co.jp">
            <div class="text">
                <h3>お相手と会う際に気をつけること</h3>
            </div>
            <div class="pic">
                <div style="height: 100px;width: 100px;background-image: url('/img/safe1.png');">
                </div>
            </div>
        </a>

        <a class="flex-box" href="//yahoo.co.jp" style="margin-top: 15px;">
            <div class="text">
                <h3>悪質なユーザーを見分ける手がかり</h3>
            </div>
            <div class="pic">
                <div style="height: 100px;width: 100px;background-image: url('/img/safe2.png');">
                </div>
            </div>
        </a>

hoge.css

.flex-box {
    background-color: #f5fbfb;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    width: 100%;
    border-radius: 15px !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.flex-box .text {
    font-size: 14px;
    color: #2c4748;
    flex-basis: 100%;
    padding-left: 15px;
    user-select: none !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.flex-box .pic {
    padding: 5px;
    user-select: none !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

以下、古い

もしくは上記と逆を作るCSSをメモ。
参考
https://niwaka-web.com/flexbox_reverse/

完成形

以下、コピペで動く

hoge.css

<style>

    /* アイコン右 、　テキスト左 */
    .flex-box {

        display:flex;
        flex-direction: row;
        justify-content: flex-start;

      /* 縦方向の並び順*/
        /*    
        flex-start：上揃え（デフォルト）
        flex-end：下揃え
        center：中央揃え
        baseline：ベースライン
        stretch：伸縮
        */
        align-items: center;//要変更

        text-decoration: none;
        width: 100%;
    }

    .flex-box .text {
        background-color: red;
        flex-basis        : 100%;
    }

    .flex-box .pic {
        background-color: blue;
        flex-basis        : 64px;
    }


</style>

hoge.html

<a class="flex-box" href="//yahoo.co.jp">
    <div class="text">
        <h3>恋と言うなの翼</h3>
        <p>切なさの中で</p>
    </div>
    <div class="pic">
        <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg">
    </div>
</a>


<!--            ここに flex-direction: row-reverse; を設定で 左右逆になる-->
<a class="flex-box" style="flex-direction: row-reverse;" href="//yahoo.co.jp">
    <div class="text">
        <h3>恋と言うなの翼</h3>
        <p>切なさの中で</p>
    </div>
    <div class="pic">
        <img src="https://placehold.jp/3d4070/ffffff/64x64.jpg">
    </div>
</a>