[HTML5] flex 반응형 코딩 연습하기 1

 

flex 반응형 예제

 

<style>
.flex_box100 {display:flex;justify-content:center;align-items:flex-start;gap:20px;}
 
.flex_box100 img {
    max-width:450px;
    height:auto;
    display:block;
    object-fit:contain;
}
@media screen and (max-width:768px) {
    .flex_box100 {flex-direction:column;}
    .flex_box100 img {width:100%;}
}
</style>
 
        <div class="pro_exp pro_wap">
            <strong class="tlt_style_01">작동 방법</strong>
 
            <div class="flex_box100 line_box line_box_type02">    
                <img src="/img/contents/pro_way_01.png" alt="" />
                <img src="/img/contents/pro_way_03.png" alt="" />
            </div>
        </div>