對，他有兩種版型：Ｄ

左側的大圖！

不知道為何大標都想加驚嘆號XD

因為文章資料的內容太常用到了，所以把他整理成了 json 方便之後快速使用～

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight } from "@fortawesome/free-solid-svg-icons";

export default function Article() {
  const articleData = {
    category: "ENTERTAINMENT",
    title: " 寶藏男孩持修：「對我來說男子氣概無關外表，而是要負責任。」",
    writer: "NICOLE LEE",
    dateTime: "2021年6月7日",
    img: "https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg",
  };
  return (
    <div>
			{/* ... */}
      <div className="post">
        <h2 className="post-headline">fashion</h2>
        <div className="post-section">
          <div className="left-side">
            <img src={articleData.img} alt="img" />
            <div className="overlay-content">
              {articleData.category}
              <div className="post-title">{articleData.title}</div>
              <hr className="white-hr" />
              BY {articleData.writer}
              {articleData.dateTime}
            </div>
          </div>
          <div className="right-side">
          </div>
        </div>
      </div>
    </div>
  );
}

.post

    &-section
        display: flex
        justify-content: space-between
        gap: 2.4vw

        .left-side
            width: (100vw-10vw)/2
            justify-content: center
            height: 100vh
            overflow: hidden

            .overlay-content
                color: $primary-background-color
                position: relative
                bottom: 410px
                left: 0
                padding: 20px 24px 40px
                font-weight: bold

        .right-side

1. 左側大圖的寬度，扣除左右寬 5vw 後與右邊分別一半，透過運算子計算出精準的寬度
2. 超過範圍的圖片內容使用 overflow: hidden 來遮蔽
3. overlay-content 是覆蓋在諞上的文字區塊，透過 position: relative 來覆蓋位置到圖上

右側的 Flex Box！

一樣先排版好～

export default function Article() {
  return (
    <div>
      <div className="post">
        <h2 className="post-headline">fashion</h2>
        <div className="post-section">
          <div className="left-side">
            {/* ... */}
          </div>
          <div className="right-side">
            <div className="row">
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
            </div>
            <div className="row">
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="rectangle-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
              <div className="post-column">
                <div className="square-img">
                  <img alt="post-img" src={articleData.img} />
                </div>
                <div className="post-paper">
                  {articleData.category}
                  <div className="post-subtitle">{articleData.title}</div>
                  <hr className="brown-hr" />
                  BY {articleData.writer}
                  {articleData.dateTime}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

這邊在 right-side 下，我使用了兩個 row 的 class 來包裹 column 中的內容，因為後續的 flex box 相關設定無法直接透過 flex box 的屬性讓內容 waterfall 樣式排版（有長有短）

.post
    &-section
        display: flex
        justify-content: space-between
        gap: 2.4vw

        .left-side
          // ...
        .right-side
            width: (100vw-10vw)/2
            height: 100vh
            display: flex
            overflow: scroll
            gap: 2.4vw
            overflow-x: hidden
            scrollbar-width: none

            .row
                flex: 1
                width: (100vw-60vw)/2

1. 右邊的寬度與上面左邊設定的方式一樣即可
2. 在右側要先設定 display: flex 讓內容可以使用 flex box 的效果
3. scroll 的部分是針對超出範圍時，使用 scroll bar 滑動
4. gap 可以設定物件間的寬度空格
5. overflow-x: hidden 不使用水平滾動，只使用垂直滾動的方式
6. row 的 flex 1 指定此 row 只有一欄，讓內容可以望下排序
7. row 的寬度也使用計算公式的方法來分配

如此一來滾動式卷軸的樣式頁面也完成啦～

感謝大家收看明天見～～～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？