前面我們有了導覽列加上banner區塊!接下來的排版就可以很快速地套用我們之前所學，display:flex完成剩下的排版，讓我們繼續看下去吧!

我們這裡先為昨天的banner加上連結，讓網頁更清楚鮮明。增加了左下角的資訊。

.bannerproject a{
            text-decoration: none;
            padding-right: 10px;
            margin: 5px;
        }
        
<div class="bannerproject">
    <a href="">首頁</a>
    <a href="">最新消息</a>
    <a href="">活動</a>
</div>

<div class="article">
        <h1>Page Introduction</h1>
        <div class="wrap">
            <div class="item">
                <img src="https://picsum.photos/300/250?random=2" alt="">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos libero suscipit laborum quaerat! Distinctio corporis molestiae fuga qui ducimus minima consectetur veritatis a. Unde rerum provident ipsa esse? Animi, eius.</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=3" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolore architecto labore, doloremque itaque aliquid illum, consequuntur quaerat sapiente, et voluptate in nemo similique veniam nisi inventore harum dolor. Quidem?</p>
            </div>
            <div class="item">
                <img src="https://picsum.photos/300/250?random=4" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci tempore, aliquid temporibus obcaecati cumque soluta id officiis porro repellat aspernatur est delectus voluptatum et minus ipsum! Assumenda nulla neque repudiandae?</p>
            </div>
        </div>
    </div>

一樣我們先建構出html標籤結構!接下來就可以開始排版設定CSS囉!
先從圖片跟文字開始，設定display:flex。

.article .wrap{
            display: flex;
            width: 100%;
            justify-content: center;
        }
        
.article .wrap .item{
            width: 300px;
            margin: 20px;
            text-align: center;
            box-shadow: 1px 5px 5px grey;
        }

記得一樣是在外容器去做flex設定(justify-content: center;水平置中)!並把我們的item設定寬度，margin，文字置中、另外加上我們前面教過的立體效果box-shadow。

大致上已經完成得差不多了，我們在讓文字不要那麼擠，設定一下padding，以及標題的大小及位置。

.article h1{
            font-size: 40px;
            text-align: center;
            margin: 20px;
        }
        
.article p{
            padding: 10px;
        }

就可以設定出來非常漂亮的section區塊了!