日: 2025年7月16日

 

https://applism.net/news/flexbox-html-css/

.type_wrap{

    .flex_box;

    .type1{
        width: 47%; margin: 0 1.5%;
        background: #fff;
        color: #000;

        padding: 2px;

        ///孫の高さを揃える工夫
        display:flex;/*子要素に追加*/
         flex-direction:column;/*子要素に追加*/


        .title_box{.flex_box; .flex_high;

            padding: 0.5rem;

            .title{width: 50%; text-align: center; font-size: 25px; font-weight: bold;}
            .nouki{width: 50%; text-align: center; font-size: 20px; }
        
        }

        .con_box{ padding: 1rem; background:#3e3a39 ; color: #fff;font-size: 18px;
            ///孫の高さを揃える工夫
        flex-grow:1;/*空きスペースの伸びる倍率を指定*/
     }

    }
}

<div class="type_wrap">

<!--  -->
<div class="type1">
    <h3 class="title_box">
        <div class="title">ハイクオリティ</div>
        <div class="nouki">納期： 約2ヶ月程度</div>

    </h3>

    <div class="con_box">
        長期的な美観を保ちたい方や、高級車や<br>
クラシックカーなど特別な車にお勧めです。<br>
しっかりとした下地処理により、耐久性が高まります。

    </div>
</div>

<!--  -->


<!--  -->
<div class="type1">
    <h3 class="title_box">
        <div class="title">ハイクオリティ</div>
        <div class="nouki">納期： 約2ヶ月程度</div>

    </h3>

    <div class="con_box">
        長期的な美観を保ちたい方や、高級車や<br>
クラシックカーなど特別な車にお勧めです。<br>
しっかりとした下地処理により、耐久性が高まります。<br>
array_diff_assoc

    </div>
</div>

<!--  -->


</div>