JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 Flexbox 創建響應式評論部分

Flexbox 是一種強大的構建佈局的新方法,它使 Web 開發中一些最具挑戰性的方面變得微不足道。目前使用的幾乎所有瀏覽器都支持它,因此現在是了解它如何適合您典型的日常前端工作的好時機。

這就是為什麼在這個快速教程中我們將使用 flexbox 構建一個評論部分。我們將看看 flexbox 佈局模式必須提供的一些更有趣的屬性,並向您展示如何充分利用它。

我們將使用什麼

Flexbox 由許多 CSS 屬性組成,我們今天將使用其中的一些屬性:

  • display: flex - 這會激活 flex 佈局模式並使元素的子元素遵循 flexbox 規則。
  • justify-content - 該屬性定義了 flexbox 元素的子元素對齊的位置(這類似於 text-align,在此處閱讀更多內容)。
  • order - Flexbox 讓我們可以控制元素顯示的確切位置。我們在評論部分使用這個強大的工具來切換文字和照片(在此處了解更多信息)。
  • flex-wrap - 控制 flex 元素中元素的換行。我們使用它來強制頭像顯示在小屏幕上的評論文本下方(MDN 上的 flex-wrap)。

佈局

我們希望我們的評論部分滿足以下要求:

  • 每條評論都應該有頭像、姓名、時間和評論正文。
  • 應該有兩種評論類型——作者寫的(藍色,頭像在右邊)和其他人寫的。
  • 兩種評論的 HTML 標記必須盡可能相似,以便通過代碼生成評論。
  • 整個事情必須完全響應。

所有這些都可以用幾行帶有 flexbox 的 CSS 來完成。讓我們繼續代碼吧!

HTML

我們的 HTML 非常簡單。我們將有一個評論列表,其中包含用於在最後撰寫新評論的基本形式。

<ul class="comment-section">

    <li class="comment user-comment">
        <div class="info">
            <a href="#">Anie Silverston</a>
            <span>4 hours ago</span>
        </div>
        <a class="avatar" href="#">
            <img src="images/avatar_user_1.jpg" width="35" alt="Profile Avatar" title="Anie Silverston" />
        </a>
        <p>Suspendisse gravida sem?</p>
    </li>

    <li class="comment author-comment">
        <div class="info">
            <a href="#">Jack Smith</a>
            <span>3 hours ago</span>
        </div>
        <a class="avatar" href="#">
            <img src="images/avatar_author.jpg" width="35" alt="Profile Avatar" title="Jack Smith" />
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida sem sit amet molestie portitor.</p>

    </li>

    <!-- More comments -->

    <li class="write-new">

        <form action="#" method="post">
            <textarea placeholder="Write your comment here" name="comment"></textarea>
            <div>
                <img src="images/avatar_user_2.jpg" width="35" alt="Profile of Bradley Jones" title="Bradley Jones" />
                <button type="submit">Submit</button>
            </div>
        </form>

    </li>

</ul>

如果您仔細查看上面的代碼,您會注意到除了具有不同的類之外,用戶評論和作者評論的 HTML 實際上是相同的。兩者之間的所有風格和佈局差異,將僅由應用於 .user-comment 的 CSS 處理 和 .author-comment 類。

CSS

在這裡,我們將看看我們在構建佈局時使用的與 flexbox 相關的技術。如果您想詳細查看樣式表,請從文章頂部附近的按鈕下載整個 CSS 文件。

首先,我們將給出所有評論 display: flex ,這將使我們能夠在評論及其子元素上使用 flexbox 屬性。

.comment{
    display: flex;
}

這些彈性容器覆蓋了我們評論部分的整個寬度,並保存了用戶信息、頭像和消息。由於我們希望作者寫的評論向右對齊,我們可以使用下面的 flex 屬性並將所有內容對齊到容器的末尾。

.comment.author-comment{
    justify-content: flex-end;
}

這將使評論看起來像這樣:

現在我們讓作者評論在右側對齊,但我們還希望容器內的元素以相反的順序排列,以便消息首先出現,然後是頭像和最右側的信息。為此,我們將利用 order 屬性。

.comment.author-comment .info{
    order: 3;
}

.comment.author-comment .avatar{
    order: 2;
}

.comment.author-comment p{
    order: 1;
}

如您所見,在 flexbox 的幫助下,整個事情再簡單不過了。

我們的評論部分看起來就像我們想要的那樣。剩下要做的就是確保它在較小的設備上也看起來不錯。由於在較窄的屏幕上沒有那麼多可用空間,我們必須對佈局進行一些重新排列,讓我們的內容更易於閱讀。

我們設置了一個媒體查詢,使評論段落擴展,佔據容器的整個寬度。這將導致頭像和用戶信息移動到下一行,因為評論有他們的 flex-wrap 屬性設置為 wrap .

@media (max-width: 800px){
    /* Reverse the order of elements in the user comments,
    so that the avatar and info appear after the text. */
    .comment.user-comment .info{
        order: 3;
    }

    .comment.user-comment .avatar{
        order: 2;
    }

    .comment.user-comment p{
        order: 1;
    }

    /* Make the paragraph in the comments take up the whole width,
    forcing the avatar and user info to wrap to the next line*/
    .comment p{
        width: 100%;
    }

    /* Align toward the beginning of the container (to the left)
    all the elements inside the author comments. */
    .comment.author-comment{
        justify-content: flex-start;
    }
}

通過將此屏幕截圖與上面的屏幕截圖進行比較,可以立即發現差異。您也可以嘗試打開演示並調整瀏覽器大小,以觀看評論部分根據窗口大小進行調整。

結論

這總結了我們的教程。我們希望這能給你一個實際的例子,告訴你如何在構建真正的佈局時使用 flexbox。如果你想知道還有什麼可能,這裡有一些你會喜歡的很棒的資源:

  • CSS-Tricks 的 flexbox 指南 - 在這裡。
  • 一篇深入的 MDN 文章 - 在這裡。
  • 一個為經典 CSS 問題提供簡單 flexbox 解決方案的網站 - 在這裡。

Tutorial JavaScript 教程
  1. Drupal - 如何使用 ajax 在 div 中加載內容?

  2. 使用 Angular 和 Firebase 構建 CRUD 應用

  3. #30DaysOfCommits 倒計時

  4. GraphQL - 堆棧 #1

  5. 在賽普拉斯的測試之間保持動態變量

  6. 使用flask,jinja2將html複選框值存儲到列表中

  7. 使用 React-Bootstrap ListGroup 通過 onClick 觸發函數

  1. 獲取和設置 HTML5 視頻當前時間

  2. 角度動畫和過渡指南

  3. 從 const 數組中獲取數字並將 +2 添加到每個數字 |必須使用 for 循環

  4. 為什麼 e.repeat 不起作用並且控制台中沒有錯誤?

  5. 樣式組件中最容易被誤解的部分🚀

  6. React – Material UI Typography 如何將長字符串分成多行

  7. 如何使用拆分?

  1. 只運行一次 useEffect :React

  2. 處理單擊外部 React 組件。

  3. VITE :帶有 Terraform 和 CircleCI 的 S3 網站

  4. WFH:自動化工廠監控器!第1部分