การจัดวางโครงสร้างด้วย flex layout
                1. เริ่มต้นด้วยการกำหนด body แบบ  flex
                body {
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                

                2. กำหนดส่วน header และ footer
                .header, .footer {
                    width: 100%;
                    text-align: center;
                }
                

                3. สร้างส่วน heaer 
                <div class="header">
                    <h1>ส่วนหัวเว็บไซต์</h1>
                </div>
                

                4. กำหนด css เมนูด้านซ้าย
                .side-nav {
                    display: flex;
                    flex-direction: column;
                    width: 20%;
                    margin-right: 20px;
                }
                .side-nav div {
                    border: 1px solid black;
                    padding: 10px;
                    cursor: pointer;
                    margin-bottom: 10px;
                }
                <div class="container">
                    <div class="side-nav">
                        <div>เมนู1</div>
                        <div>เมนู2</div>
                        <div>เมนู3</div>
                    </div>
                </div>
                

                5. กำหนด css ส่วนเนื้อหาหลัก
                .container {
                    display: flex;
                    width: 80%;
                    max-width: 1200px;
                    margin-top: 20px;
                }
                .main {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 60%;
                }
                .main img {
                    max-width: 100%;
                    height: auto;
                }
                <div class="main">
                    <img src="images/รูปภาพ" alt="pictuer">
                    <div class="caption">เนื้อหาประกอบรูปภาพ</div>
                </div>
                

                6. กำหนด css ส่วน List รายการ
                .news-list {
                    display: flex;
                    flex-direction: column;
                    width: 20%;
                }
                .news-list div {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px;
                    border-bottom: 1px solid black;
                }
                <div class="news-list">
                    <div><span>รายการ</span><span></span></div>
                    <div><span>รายการ1</span><span>50</span></div>
                    <div><span>รายการ2</span><span>40</span></div>
                    <div><span>รายการ3</span><span>60</span></div>
                    <div><span>รายการ4</span><span>80</span></div>
                </div>
                

                7. สร้างส่วน footer
                <div class="footer">
                <p>ส่วนท้ายเว็บไซต์</p>
                </div>