CSS ?? ? ???? : ??? ???? ??? ??

???? ???? ?? ?? ??? ???? ?? ? ??? ?? ? ? ????? ??? ??? ?? ???? ???? ?????. ? ??? CSS? Flexbox ? ??? ??? ???? ? ? ??? ??? ???? ??? ???? ??? ???? ??? ?? ??? ????, ?? ?? (? : ?? ??)??? ???? ??? ?? ???? ? ??? ????.

?? ?? ??

??? CSS ? Flexbox? ???? ?? ?? ?? (200x200 ??)? ??? ???? ????? ???? ????. ? ???? ???? ??? ??? ?????. ?? ???? ???? ??? ?? ????.

?? ? ??? : Viewport? ???

??? ??? ?? ??? ?? ????? ??? ?? ??? ???? ? ???, ?? ????? ??? ??? ???? ?????. ???? ? ???? ??? ???? ???? ?? ?????. ??? ??? ??? ? ???? ?? ???? ???? ????? ????????.

??? ??? : HTML ? CSS ??

?? ? ????? ????? ??? ?? ??? ????? ???? CSS ??? ??????.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox ???? ??</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1; /* 占據(jù)剩余空間 */
        }

        /* 小屏幕媒體查詢 (例如手機(jī)) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 屬性，讓文本自適應(yīng)寬度 */
            }
        }
    </style>


    <div class="container">
        <div class="image">??</div>
        <div class="text">??? ??</div>
    </div>

?? ?? :

• meta name="viewport" : ???? ?? ??? ?? ??? ???? ?????.
• .container : Flexbox ????? ??????.
• .image : ??? ??? ??????.
• .text : flex: 1; ???? ??? ??? ????????.
• @media (max-width: 600px) : ??? ??. ?? ??? 600px ??? ?? flex-direction column ???? ?? ????? ???? .text ? flex ??? ???? ??? ??? ??? ??? ? ???????.

?? ??? ?? ? ??? ????? ?? ??? ?? ???? ???? ??? ?? ??? ????. ?? ??? ?? max-width ? ?? ??? ? ????.

? ??? CSS ? Flexbox? ???? ?? ?? ??? ???? ???? ?? ? ????? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!