用CSS網格和Flexbox構建特雷洛佈局-css教學-PHP中文網

首頁

web前端

css教學

用CSS網格和Flexbox構建特雷洛佈局

尊渡假赌尊渡假赌尊渡假赌

Feb 16, 2025 pm 01:10 PM

用CSS網格和Flexbox構建特雷洛佈局

鑰匙要點

>教程演示瞭如何使用CSS網格和Flexbox實現Trello板的基本佈局，從而提供了響應迅速的僅CSS的解決方案。佈局由應用程序欄，板欄和包含卡列表的部分組成。

>教程建議將最大高度約束應用於內部無序列表以管理列表的高度。它還說明瞭如何使列表與父容器一樣高，以及僅在需要時使用溢出Y屬性來顯示scrollbar。

在本教程中，我將引導您完成Trello板屏幕的基本佈局的實現（請參見此處的示例）。這是一個響應迅速的，僅CSS的解決方案，只有佈局的結構特徵才能開發出來。

對於預覽，這是最終結果的編碼epen演示。

除了網格佈局和Flexbox外，該解決方案還採用了計算和視口單元。為了使代碼更加可讀性和高效，我還將利用SASS變量。

>沒有提供後備，因此請確保在支持瀏覽器中運行代碼。毫無疑問，讓我們深入研究，開發屏幕組件一個一個。

屏幕佈局

> Trello板的屏幕由應用程序欄，一個板欄和包含卡列表的部分組成。我將使用以下標記骨架來構建此結構：

將通過CSS網格實現此佈局。具體而言，一個3×1網格（即一列和三行）。第一行將用於應用程序欄，第二行是董事會欄，第三行是.LAM元素。

前兩行的高度固定，而第三行將跨越可用的視口高度的其餘部分：

視口單元確保.UI容器始終像瀏覽器的視口一樣高。

>將網格格式上下文分配給容器，並定義了上面指定的網格行和列。更確切地說，僅由於沒有需要聲明唯一的列而定義行。行的尺寸是用桿高度和FR單元的幾個SASS變量完成的，以使列表元素的高度跨越可用的視口高。

卡列表部分

>

>如前所述，屏幕網格的第三行託管卡列表的容器。這是其標記的概述：

<span><span><span><div> class<span>="ui"</span>>
  <span><span><span><nav> class<span>="navbar app"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><nav> class<span>="navbar board"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><div> class<span>="lists"</span>>
    <span><span><span><div> class<span>="list"</span>>
      <span><span><span><header>></header></span>...<span><span></span>></span>
</span>      <span><span><span><ul>></ul></span>
</span>        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>        ...
        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><footer>></footer></span>...<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span>

我正在使用一個完整的視口寬度flexbox單線行容器來格式化列表：

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

>將自動值分配給Overflow-X屬性會告訴瀏覽器在列表不適合視圖時列表時，在屏幕底部顯示水平滾動條。 >>>>

> flex速記屬性在flex項目上使用，以使列表

剛性

。 Flex-Basis的自動值（用於速記中）指示佈局引擎從.LIST元素的寬度屬性中讀取大小，而flex Grow和Flex-shrink的零值則阻止了此寬度的改變。 > 接下來，我需要在列表之間添加水平分離。如果設置了列表上的正確邊距，則不會渲染具有水平溢出的板上的最後一個列表之後的邊距。為了解決此問題，列表由左邊邊緣分開，最後列表和右視口緣之間的空間通過在每個.LIST元素中添加偽元素後處理:: ::。默認的flex shrink：1必須被覆蓋，否則偽元素“吸收”所有負空間，並且消失了。

請注意，在Firefox 卡列表

>每個卡列表由標頭欄，一系列卡和頁腳欄組成。以下HTML摘要捕獲了以下結構：

>至關重要的任務是如何管理列表的高度。標題和頁腳具有固定高度（不一定相等）。然後有可變數量的卡，每張卡都有可變數量的內容。因此，列表在添加或刪除時垂直增長和收縮。

>但是高度不能無限期地增長，它需要具有取決於.LIST元件的高度的上限。一旦達到此限制，我希望出現一個垂直滾動條，以允許訪問溢出列表的卡。

<span><span><span><div> class<span>="lists"</span>>
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

這聽起來像是最大高點和溢出屬性的工作。但是，如果將這些屬性應用於根容器.LINS，則一旦列表達到其最大高度，將出現滾動欄，其中包括所有元素，標頭和頁腳。以下圖顯示了左側錯誤的側邊欄，右側顯示了正確的側邊欄：

用CSS網格和Flexbox構建特雷洛佈局

>因此，讓我們將最大高度約束應用於內部

<span><span><span><div> class<span>="ui"</span>>
  <span><span><span><nav> class<span>="navbar app"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><nav> class<span>="navbar board"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><div> class<span>="lists"</span>>
    <span><span><span><div> class<span>="list"</span>>
      <span><span><span><header>></header></span>...<span><span></span>></span>
</span>      <span><span><span><ul>></ul></span>
</span>        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>        ...
        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><footer>></footer></span>...<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span>

，但是有一個問題。百分比值並不是指列表，而是指

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

>以這種方式，因為.LIST總是像列表一樣高，無論其內容如何，其背景色屬性不能用於列表背景顏色，但是可以使用其孩子（標題，頁腳，頁板，卡片）為此目的。

>對列表高度的最後調整是必要的，以說明列表底部和視口底部邊緣之間的一些空間（$ abap）：

<span><span><span><div> class<span>="lists"</span>>
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

>另外的$ scrollbar-thickness量被減去，以防止列表觸摸.LIST元素的水平滾動條。實際上，在Chrome上，此滾動條在。清單框中。也就是說，100％的值是指。清單的高度，包括滾動欄。

>在Firefox上，滾動欄是“附加”。清單高度之外，即100％是指不包括滾動條的名單的高度。因此，這是不需要的。結果，當可見滾動欄時，在Firefox上，列表底部邊框之間的視覺空間已達到其最大高度，滾動欄的頂部稍大。

這是此組件的相關CSS規則：

如前所述，列表背景顏色是通過將$ list-bg彩色值分配給每個名單元素的孩子的背景色屬性來渲染的。溢出Y僅在需要時顯示scrollbar。最後，將一些簡單的樣式添加到標題和頁腳中。

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

修飾觸摸

單卡的HTML簡單由列表項組成：>

或，如果卡具有封面圖像：

<span><span><span><div> class<span>="list"</span>>
  <span><span><span><header>></header></span>List header<span><span></span>></span>
</span>  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>...<span><span></span>></span>
</span>    ...
    <span><span><span><li>></li></span>...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>Add a card...<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

這是相關的CSS：

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

設置了背景，填充和底部邊緣後，就可以準備好封面圖像佈局。圖像寬度必須從左側填充邊緣到右填充邊緣的整個卡範圍：

然後，分配負邊緣以水平和垂直對齊圖像：

<span><span>.list</span> {
</span>  <span>height: 100%;
</span><span>}</span>

第三個正保證金值照顧封面圖像和卡文本之間的空間。

>最後，我在佔據屏幕佈局第一行的兩個條上添加了一個flex格式上下文。但是他們只是素描。通過擴展演示，可以隨意建立自己的實施。

結論

這只是完成此設計的一種可能方法，看到其他方法很有趣。另外，最終確定佈局將很不錯，例如完成兩個屏幕欄。

>另一個潛在的增強可能是對卡列表的自定義滾動條的實現。

因此，請隨時在下面的討論中分叉演示並發布鏈接。

經常詢問的問題（常見問題解答）有關使用CSS網格和Flexbox

構建Trello佈局

>如何使用CSS網格和Flexbox創建類似Trello的佈局？

>使用CSS網格和Flexbox創建類似Trello的佈局，涉及多個步驟。首先，您需要為佈局創建基本的HTML結構。這包括為您的董事會和單個容器創建列表和卡的容器。接下來，您將CSS網格應用於板容器以創建網格佈局。然後，您可以使用FlexBox在其各自的容器中排列列表和卡。這使您可以創建一個響應迅速，靈活的佈局，可以容納任何數量的列表和卡片。

>使用CSS Grid和Flexbox創建類似Trello的佈局有什麼好處？ CSS網格和Flexbox為創建類似trello的佈局提供了一些好處。它們允許您創建一個響應迅速的佈局，該佈局可以適應不同的屏幕尺寸和方向。他們還提供了一個靈活的佈局系統，可以容納任何數量的列表和卡。此外，它們提供了強大的對齊和分配控件，使創建乾淨，有條理的佈局變得容易。