~楓花雪岳~: [CSS] 雙欄流體式設計

星期六, 12月 06, 2025

[CSS] 雙欄流體式設計

透過 flex 屬性設計，讓雙欄式版面，達到 [右側固定、左側流體式設計]，flex 屬性還可以細分為 flex-grow (預設值為 0)、flex-shrink (預設值為 1) 和 flex-basis

右側：flex: 0 0 200px 代表

flex-grow: 0 (不成長)
flex-shrink: 0 (不收縮)
flex-basis: 200px (基礎寬度為 200px)

左側：flex: 1 代表

flex-grow: 1
flex-shrink: 1 (預設值)
flex-basis: 0%

該設定會自動填滿除了右側 200 px 外的所有空間

index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>[CSS] 雙欄式設計</title>
</head>

<body>
    <div class="wrap">

        <div class="content">
            <div class="item">
                <img src="https://82534363_4f518a102e_n.jpg" alt="高雄愛河">
                <h2>高雄愛河</h2>
                <p>高雄愛河是穿梭都市的生命之水，兩岸綠樹成蔭，微風徐徐。夜間尤其迷人，河畔燈光倒映水面，波光粼粼，如同一條璀璨的銀帶。遊客可漫步親水步道，或搭乘愛之船，感受迎面而來的浪漫氣息。週末更有市集和街頭藝人，為這片靜謐的河景增添熱鬧與活力，是高雄最具代表性的休憩與觀光勝地。</p>
            </div>
        </div>

        <div class="siderbar">
                <div class="aboutme">
                    <h2>關於我</h2>
                    <p>以下省略一萬字</p>
                </div>            
                <div class="mobile-hide">
                    <h2>文章分類</h2>
                    <p>HTML</p>
                    <p>CSS</p>
                    <p>Javascript</p>
                </div>              
                <div class="mobile-hide">
                    <h2>依日期分類</h2>
                    <p>2025 (77)</p>
                    <p>2024 (108)</p>
                </div>                           
        </div>

    </div>
</body>
</html>

style.css

*,*::before,*::after {
    box-sizing: border-box;
}

.wrap{
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
}

.content{
    display: flex;
    flex-direction: column;
    gap: 10px; 
    flex:1; 
}

.item{
    padding: 10px;
    border: lightgray 1px solid;
}

.item img{
    display: block;
    margin: 0 auto;
}

.item h2{
    text-align: center;
    font-size: 25px;
}

.siderbar{
    flex: 0 0 200px;
    padding: 20px;
    border: lightgray 1px solid;
}

效果呈現

~楓花雪岳~

星期六, 12月 06, 2025

[CSS] 雙欄流體式設計

沒有留言:

張貼留言